Question

没有标题“栏”，你可以明显看到标题没有正确显示。我该如何解决？

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

Switch In标头未正确显示

2 个答案: