元素出現在同一行

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;的CSS您td。

這會給你這樣的佈局：

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%; 
}