元素出现在同一行中

Question

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

我想要的只是“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中。

这会给你一个这样的布局：

Answer 2

您可以通过定位制作更好，更可控的结果，例如：http://jsfiddle.net/B32Cc/

table.calendar-program >tbody> tr>td{
    width: 14%;
    border: 1px solid #000;
    text-align: center;
    position: relative;
    padding: 10px 15px;
}
small.event-calendar{
    clear: both;
    color: #000!important;
    font-size: 10px;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
}