Question

我是html，css，javascript，php和sql的新手，所以我尝试制作一个简单的程序来复制商店的主页。这是基本的想法：

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

然后我看了How do I render <li> side-by-side?，然后拿出了显示：inline-block，它仍然无法正常工作，所以我拿出花车并加回显示：inline-block，没有＃＆＃ 39;工作要么。

最后我看到Align two inline-blocks left and right on same line并显示：flex justify-content：space-between，它仍然没有用。

我该如何解决这个问题？

具有flex和space-between的最终代码：

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

也许你会试试这个

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

Answer 2

请将li放在相同的ul中。看看小提琴

https://jsfiddle.net/tqasgr6x/

<ul>

Answer 3

不同的display:inline-block不会并排放置。除非你真的想把它并排放在另一个故事中。

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

您只需将float:left和<li>放在ul li{ float:left; display:inline-block; padding-right:10px; }上，这样就可以将它们并排放置。

workers.properties

Answer 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>

使用float进行右对齐 Refer

如何将两个<li>项放在一行[inline，float left，inline block not working]

4 个答案: