[英]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.