Question

我有一个非常简单的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>

Answer 1

那是因为您将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>

Answer 2

不浮动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>

Answer 3

您对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;
}

以正确的顺序显示无序列表元素

3 个答案: