如何将两个 <li> 项放在一行上[内联、向左浮动和内联块不起作用]答案

【问题标题】：How to put two <li> items on one line [inline, float left, and inline block not working]如何将两个 <li> 项放在一行上[内联、向左浮动和内联块不起作用]
【发布时间】：2016-08-10 12:09:08
【问题描述】：

我对 html、css、javascript、php 和 sql 非常陌生，所以我尝试制作一个简单的程序来复制商店的主页。基本思路如下：

我希望我的所有 li 项目都在一条线上，但这不起作用，所以我查看了：how to align all my li on one line? 并将 display: inline 更改为 display: inline-block 并添加了 float: left 和 float:对，使用相同的 html。

然后我看了How do I render <li> side-by-side?，取出了display:inline-block，还是不行，所以我把floats又加回来了display:inline-block，还是不行。

最后我看到Align two inline-blocks left and right on same line 和 display: flex justify-content: space-between，还是不行。

我该如何解决这个问题？

带有 flex 和空格的最终代码：

#header {
  background-color: purple;
  display: flex;
  justify-content: space-between;
}
            
ul {
  list-style-type: none;
}
            
#navbar {
  background-color: red;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>William Shop</title>
    </head>
    <body>
        <div id="header">
            <div id="navbar">
                <ul>
                    <li>
                        <a href="register.php" class="register_link">Register</a>
                    </li>
                </ul>
                
                <ul>
                    <li>
                        <a href="loginq.php" class="login_link">Login</a>
                    </li>
                </ul>
            </div>
        </div>
        
    </body>
</html>

【问题讨论】：

为什么有两个ul 元素？您应该将两个li 放在同一个ul 中。然后使用您查看的问题的答案。

标签： html css

【解决方案1】：

也许你会试试这个

<ul> <li></li> <li></li> <ul>

【讨论】：

【解决方案2】：

请将 li 放在同一个 ul 中。看小提琴

https://jsfiddle.net/tqasgr6x/

<div id="header">
            <div id="navbar">
                <ul>
                    <li>
                        <a href="register.php" class="register_link">Register</a>
                    </li>
                    <li>
                        <a href="loginq.php" class="login_link">Login</a>
                    </li>
                </ul>
            </div>
        </div>


#header {
  background-color: purple;
  display: flex;
  justify-content: space-between;
}

ul {
  list-style-type: none;
}

ul li{
  display:inline-block;
}

#navbar {
  background-color: red;
}

【讨论】：

【解决方案3】：

拥有不同的<ul> 不会并排放置。除非你真的想把它并排放置，否则就是另一回事了。

无论如何，这是您想要实现的目标的示例：JSFiddle

您只需将display:inline-block 和float:left 放在<li> 上，这样您就可以将它们并排放置。

ul li{
  float:left;
  display:inline-block;
  padding-right:10px;
}

【讨论】：

【解决方案4】：

这将在单行中列出

css

ul {
    list-style-type: none;
}

li {
    display: inline;
}

单个 ul

<ul>
    <li>
        <a href="register.php" class="register_link">Register</a>
    </li>
    <li>
        <a href="loginq.php" class="login_link">Login</a>
    </li>
</ul>

使用浮点数进行右对齐 Refer

【讨论】：