[英]Align header elements with left middle right order
我想在我的标题中对齐我的元素，以便它们被定位，如下所示：
LOGO SEARCH LINK|LINK
标志从最左边开始，而搜索在中间，而链接在右边，而我希望搜索是标志的 div 和 siteMeta 之间的空间的最大宽度，我不想破坏响应能力.
body { margin: 0 auto; } .container { border: 1px solid blue; box-sizing: border-box; padding: 0; } #logo { float: left; max-width: 220px; } #search { float: left; max-width: 300px; margin-top: 75px; } #siteMeta { float: left; max-width: 300px; height: 220px; line-height: 220px; }
<div class="container"> <div id="header"> <div id="logo"> <img src="images/logo.png" class="img-responsive"> </div> <div id="search"> <form class="navbar-form" role="search"> <div class="input-group add-on"> <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> <div id="siteMeta"> <a href="#">Link</a> <a href="#">Link</a> </div> </div> </div>
如果要使用flexbox布局，则可能非常简单。 （浏览器支持带前缀的IE10 +）
#header { display: flex; align-items: center; } #search { background: pink; flex: 1; text-align: center; }
<div id="header"> <div id="logo">Logo</div> <div id="search">Search</div> <div id="siteMeta">Link</div> </div>
如果确实需要支持IE9和IE8，则可以使用CSS表实现类似的布局。
#header { display: table; width: 100%; } #logo, #search, #siteMeta { display: table-cell; vertical-align: middle; white-space: nowrap; } #search { background: pink; width: 100%; text-align: center; }
<div id="header"> <div id="logo">Logo</div> <div id="search">Search</div> <div id="siteMeta">Link</div> </div>
您可以使用width属性的calc值解决此问题。
我不得不将以下内容添加到您的 css 中。 我已经更换了你max-width与性能的width并添加了一些背景，以更好地观察结果。
#search{
width: calc(100% - 220px - 300px);
}
#search input {
width: 100%;
box-sizing: border-box;
}
#siteMeta{
width: 300px;
}
#logo{
width: 220px;
}
https://jsfiddle.net/9h3zm2sc/
如果您想要更广泛的支持，您还可以通过以下方式解决：
* {
box-sizing: border-box;
}
#search{
width: 100%;
position: absolute;
top: 0;
left: 0;
padding-left: 220px; /* width of the logo */
padding-right: 300px; /* width of the siteMeta */
}
#siteMeta{
float: right;
}
您可以将#header表格，其子元素table-cells width: 33%; ：
body { margin: 0 auto; } .container { border: 1px solid blue; box-sizing: border-box; padding: 0; } #header { display: table; width: 100%; } #header > * { display: table-cell; width: 33%; } #logo { } #search { margin-top: 75px; text-align: center; } #siteMeta { text-align: right; height: 220px; line-height: 220px; }
<body> <div class="container"> <div id="header"> <div id="logo"> <img src="images/logo.png" class="img-responsive"> </div> <div id="search"> <form class="navbar-form" role="search"> <div class="input-group add-on"> <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i> </button> </div> </div> </form> </div> <div id="siteMeta"> <a href="#">Link</a> <a href="#">Link</a> </div> </div>
CSS 表格可以做到这一点。
简化的布局
.container { display: table; width: 100%; border: 1px solid grey; } #header, #logo, #search, #siteMeta { display: table-cell; } #siteMeta a { display: table-cell; padding: 0 1em; text-align: center; } #search { width: 100%; text-align: center; background: lightblue; }
<div class="container"> <div id="header"> <div id="logo"> LOGO </div> <div id="search"> <form class="navbar-form" role="search"> <div class="input-group add-on"> SEARCH </div> </form> </div> <div id="siteMeta"> <a href="#">Link</a> <a href="#">Link</a> </div> </div>
简单地没有 table 和 flex：
body { margin: 0 auto; text-align:center; } #header { width: 100%; } #logo { float:left; width:33%; } #search { float: left; width:33%; } #siteMeta { float: left; width:33%; }
<body> <div class="container"> <div id="header"> <div id="logo"> <img src="images/logo.png" class="img-responsive"> </div> <div id="search"> <form class="navbar-form" role="search"> <div class="input-group add-on"> <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i> </button> </div> </div> </form> </div> <div id="siteMeta"> <a href="#">Link</a> <a href="#">Link</a> </div> </div>
HTML-左右对齐3个元素，但如果没有空格，则将中间元素向左对齐
[英]HTML - align 3 elements left right and center, but move middle one to left if no space
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.