我正在处理导航栏,它目前看起来像这样:
现在我希望文本向右浮动。这样红色空间就在左侧。但是如果尝试“float: right”,它看起来像这样:
红色背景消失了。我使用了一个额外的 div(columnsection),但在最好的情况下我想摆脱它。我希望有人可以帮助我。
* {
padding: 0px;
margin: 0px;
}
#navbar {
margin: auto;
width: 100%;
max-width: 1200px;
background-color: red;
color: white;
}
#navbar ul li {
display: inline-block;
background-color: blue;
margin: 0px;
}
#navbar ul {
float: right;
}
<div id="navbar">
<div id="columnsection">
<ul>
<li> Lorem </li>
<li> Lorem </li>
<li> Lorem </li>
<li> Lorem </li>
<li> Lorem </li>
</ul>
</div>
而不是float:right
使用text-align:right
* {
padding: 0px;
margin: 0px;
}
#navbar {
margin: auto;
width: 100%;
max-width: 1200px;
background-color: red;
color: white;
}
#navbar ul li {
display: inline-block;
background-color: blue;
margin: 0px;
}
#navbar ul {
text-align: right;
}
<div id="navbar">
<div id="columnsection">
<ul>
<li> Lorem </li>
<li> Lorem </li>
<li> Lorem </li>
<li> Lorem </li>
<li> Lorem </li>
</ul>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句