我有一个非常简单的CSS
问题,但我无处解决。
我希望标题右div这样显示:
a b c d
相反,它显示如下:
d c b a
如何按期望的顺序对齐?
ul li{
display: inline;
list-style: none;
}
a {
text-decoration: none;
}
#header {
width: 100%;
}
#header-left li {
float: left;
}
#header-right li {
float: right;
margin-right: 25px;
}
<div id="header">
<div id="header-left">
<ul>
<li><a href="/">Brand</a></li>
</ul>
</div>
<div id="header-right">
<ul>
<li><a href="/a">a</a></li>
<li><a href="/b">b</a></li>
<li><a href="/c">c</a></li>
<li><a href="/d">d</a></li>
</ul>
</div>
</div>
答案 0 :(得分:2)
那是因为您将li
浮动在右侧。浏览器会按照看到它们的顺序开始浮动元素。意思是:a
向右移动,然后b
向右移动,然后c
,最后是d
。
改为浮动您的ul
。
ul li {
display: inline;
list-style: none;
}
a {
text-decoration: none;
}
#header-left ul {
float: left;
}
#header-right ul {
float: right;
margin-right: 25px;
}
<div id="header">
<div id="header-left">
<ul>
<li><a href="/">Brand</a></li>
</ul>
</div>
<div id="header-right">
<ul>
<li><a href="/a">a</a></li>
<li><a href="/b">b</a></li>
<li><a href="/c">c</a></li>
<li><a href="/d">d</a></li>
</ul>
</div>
</div>
您还可以使用flexbox解决此问题。
ul li {
display: inline;
list-style: none;
}
a {
text-decoration: none;
}
#header {
display: flex;
/* Pushes #header-left and #header-right to the outside edges of #header. */
justify-content: space-between;
}
#header-right ul {
margin-right: 25px;
}
<div id="header">
<div id="header-left">
<ul>
<li><a href="/">Brand</a></li>
</ul>
</div>
<div id="header-right">
<ul>
<li><a href="/a">a</a></li>
<li><a href="/b">b</a></li>
<li><a href="/c">c</a></li>
<li><a href="/d">d</a></li>
</ul>
</div>
</div>
答案 1 :(得分:0)
不浮动lis,仅ul:
ul li{
display: inline;
list-style: none;
}
a {
text-decoration: none;
}
#header {
width: 100%;
}
#header-left {
float: left;
}
#header-right {
float: right;
margin-right: 25px;
}
<div id="header">
<div id="header-left">
<ul>
<li><a href="/">Brand</a></li>
</ul>
</div>
<div id="header-right">
<ul>
<li><a href="/a">a</a></li>
<li><a href="/b">b</a></li>
<li><a href="/c">c</a></li>
<li><a href="/d">d</a></li>
</ul>
</div>
grid或flex也可以做:
ul li {
list-style: none;
margin-right:25px;
}
a {
text-decoration: none;
}
#header, #header-right ul {
display: flex;
}
#header-right {
margin-left: auto;
margin-right: 25px;
}
<div id="header">
<div id="header-left">
<ul>
<li><a href="/">Brand</a></li>
</ul>
</div>
<div id="header-right">
<ul>
<li><a href="/a">a</a></li>
<li><a href="/b">b</a></li>
<li><a href="/c">c</a></li>
<li><a href="/d">d</a></li>
</ul>
</div>
答案 2 :(得分:0)
您对li的浮动是您的问题。这将解决它:
ul li {
display: inline;
list-style: none;
}
a {
text-decoration: none;
}
#header {
width: 100%;
}
#header-left li {
float: left;
}
#header-right {
float: right;
}
#header-right li {
margin-right: 25px;
}