開關在頭部沒有顯示正確

Question

例子：http://jsfiddle.net/Y9ntF/3/

沒有頭「吧」，你可以很明顯的看出頭部沒有出現正常。 我該如何解決它？

CSS

#myTitle,#myTitle2{ 
    float:left; 
    width:20%; 
    margin: .6em 0 .8em 40%; 
} 
#mySelect,#mySelect2{ 
    float:right; 
    z-index: 1; 
} 

JS

$('#myTitle2').append("page title"); 

HTML

<div data-role="page" id="defaultevent"> 
    <div data-role="header" id="ehdr"> 
     <h1 id="myTitle2"></h1> 
     <span id="mySelect2"> 
      <select name="switch" id="goingswitch" data-role="slider" data-mini="true"> 
       <option value="off">No Past</option> 
       <option value="on">Past</option> 
      </select> 
     </span> 
    </div> 
</div> 

Answer 1

添加overflow: hidden到#ehdr是單向的：

http://jsfiddle.net/Y9ntF/4/

Answer 2

另一種解決方案是實現clearfix解決方案作爲twitter-bootstrap給出

.clearfix:before, .clearfix:after { 
    display: table; 
    line-height: 0; 
    content: ""; 
} 

.clearfix:after { 
    clear: both; 
} 
.clearfix:before, .clearfix:after { 
    display: table; 
    line-height: 0; 
    content: ""; 
} 
.clearfix:after { 
    clear: both; 
} 

<div data-role="page" id="defaultevent"> 
    <div data-role="header" id="ehdr" class="clearfix"> 
     <h1 id="myTitle2"></h1> 
     <span id="mySelect2"> 
      <select name="switch" id="goingswitch" data-role="slider" data-mini="true"> 
       <option value="off">No Past</option> 
       <option value="on">Past</option> 
      </select> 
     </span> 
    </div> 
</div> 

演示：Fiddle