Question

我正在为我的朋友制作一个网站，我想知道我是否可以将两个html <li>元素放在一起？我有一个jsfiddle here。

Answer 1

尝试：

li{display:inline-block;}

或

li{float:left;}

Answer 2

您可以将其显示设置为inline或inline-block。或者你可以把它们漂浮起来。

Answer 3

替换

    <ul>
    <li class="main"><a href="#">Home</a></li>
    <li class="main"><a href="#">Dropdown Goes Here</a>
        <ul>
        <a href="#" class="gr">Dropdown content goes here</a>
        </ul>
    </li>
    </ul>

将此添加到样式

.main{
    display:inline;
}

Answer 4

假设您需要nav，首先，请提供正文width:100%;

body {
    text-decoration:none;
    background:#EBEBEB;
    font-family:Calibri;
    width:100%;
}
nav {
    width:100%; /* this will set nav full width of conatiner*/
}
nav > ul >li {
    display:inline-block;
    width:50%; /* this will put 2 in one row*/
}

Answer 5

使用float作为您的元素，如下所示：

li{
    float: left;   /*  or right  */
}

Answer 6

尝试使用：

li { 
   display: inline-flex;
   float: left;
   width: 100%; 
}

Answer 7

以上方法均无效。这些做。要么：如果使用Bootstrap 4，请使用：

<ul class="list-group">

或者：

<ul class="OnePerLine">

.OnePerLine {
flex-direction: column;
}

Answer 8

Use the float property, like:

li{
    float: left;
}

or

li{
    float: right;
}

同一行中的多个<li>元素</li>

8 个答案: