css - 元素出现在同一行

Question

我必须在 html 中制作一个日历。我想用 table 做这个。

我想要的只是“2”与其他元素(3、4、5...等)在同一行。

代码:

<table class="calendar-program col-md-12">
      <thead>
        <tr>
          <th>L</th>
         <th>M</th>
         <th>M</th>
         <th>J</th>
         <th>V</th>
         <th>S</th>
          <th>D</th>
       </tr>
     </thead>
     <tbody>
      <tr>
        <td>1</td>
         <td>2
          <div class="clearfix"></div>
          <small class="event-calendar">1 event</small>
        </td>
          <td>3</td>
           <td>4</td>
            <td>5</td>
             <td>6</td>
             <td>7</td>


      </tr>


     </tbody>

   </table>

CSS:

table.calendar-program >tbody> tr>td{
    width: 14%;
    border: 1px solid #000;
    text-align: center;        
}

small.event-calendar{
    clear: both;
    color: #000!important;
    font-size: 10px;
}

Demo

Answer 1

您可以将 vertical-align: top; 添加到 td 的 CSS。

这会给你一个像这样的布局: