0

示例: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>
4

2 回答 2

2

添加overflow: hidden#ehdr是一种方法:

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

于 2013-07-12T02:58:16.177 回答
2

另一种解决方案是实现twitter-bootstrap中给出的clearfix解决方案

.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>

演示:小提琴

于 2013-07-12T03:04:19.813 回答