作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个用作表格的标题,我正在尝试将最后一个 li float 到右边。
我已经尝试将第 5 个 li 的 padding-right % 设置为出现在最后,但显然这并不理想,因为在其他屏幕上它会导致问题。我也试过将它 float 到右边,但它弄乱了垂直对齐。有什么建议吗?
#header ul {
width: 100%;
float: left;
margin: 0;
margin-top: 2px;
padding: 0;
list-style-type: none;
list-style-image: none;
}
#header ul li {
height: 100%;
display: table-cell;
vertical-align: middle;
}
/* Logo */
#header li:nth-child(1) {
font-size: 40px;
font-family: serif;
font-weight: bold;
padding-right: 4%;
}
/* Back & Forward buttons */
#header li:nth-child(2) {
padding-right: 8.2%;
}
/* Search box */
#header li:nth-child(3) {
padding-right: 4.5%;
}
/* Break line */
#header li:nth-child(4) {
padding-right: 2%;
}
/* Icons */
#header li:nth-child(5) {}
/* Icons */
#header li:nth-child(6) {
border: 1px dotted red;
}
<div id="header">
<ul>
<!-- Logo -->
<li width="10%"><div>B</div></li>
<!-- Back / forward buttons -->
<li>
<i class="material-icons md-38 back-forward icn-hvr">chevron_left</i>
<i class="material-icons md-38 back-forward icn-hvr">chevron_right</i>
</li>
<!-- Search box -->
<li>
<input type="search" id="search" size="30" placeholder="What are you looking for?" />
</li>
<!-- Break line -->
<li>
<span class="hdr-break"></span>
</li>
<!-- Icons -->
<li>
<i class="material-icons md-26 icn-lft icn-stamp">add_location</i>
<i class="material-icons md-26 icn-lft icn-map">map</i>
<i class="material-icons md-26 icn-lft icn-hvr">business_center</i>
<i class="material-icons md-26 icn-lft icn-hvr">notifications</i>
</li>
<!-- This should float right -->
<li>
<p>x</p>
</li>
</ul>
</div>
最佳答案
如果你会使用 flexbox,那是很容易做到的。使用 align-items: center;
将使元素垂直居中。最后一项设置为 margin-left: auto;
以将“x”图标发送到最右侧。
运行下面的代码片段并单击“整页”进行查看。
#header ul {
width: 100%;
/* float: left; */
margin: 0;
margin-top: 2px;
padding: 0;
list-style-type: none;
list-style-image: none;
display: flex;
align-items: center;
}
#header ul li {
height: 100%;
/* display: table-cell; */
/* vertical-align: middle; */
}
/* Logo */
#header li:nth-child(1) {
font-size: 40px;
font-family: serif;
font-weight: bold;
padding-right: 4%;
}
/* Back & Forward buttons */
#header li:nth-child(2) {
padding-right: 8.2%;
}
/* Search box */
#header li:nth-child(3) {
padding-right: 4.5%;
}
/* Break line */
#header li:nth-child(4) {
padding-right: 2%;
}
/* Icons */
#header li:nth-child(5) {}
/* Icons */
#header li:nth-child(6) {
border: 1px dotted red;
margin-left: auto;
}
<div id="header">
<ul>
<!-- Logo -->
<li width="10%"><div>B</div></li>
<!-- Back / forward buttons -->
<li>
<i class="material-icons md-38 back-forward icn-hvr">chevron_left</i>
<i class="material-icons md-38 back-forward icn-hvr">chevron_right</i>
</li>
<!-- Search box -->
<li>
<input type="search" id="search" size="30" placeholder="What are you looking for?" />
</li>
<!-- Break line -->
<li>
<span class="hdr-break"></span>
</li>
<!-- Icons -->
<li>
<i class="material-icons md-26 icn-lft icn-stamp">add_location</i>
<i class="material-icons md-26 icn-lft icn-map">map</i>
<i class="material-icons md-26 icn-lft icn-hvr">business_center</i>
<i class="material-icons md-26 icn-lft icn-hvr">notifications</i>
</li>
<!-- This should float right -->
<li>
<p>x</p>
</li>
</ul>
</div>
关于html - 如何在 CSS 中将 <li> float 到右侧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34685388/
我是一名优秀的程序员,十分优秀!