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

时间:2014-01-03 08:10:52

标签: html css

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

8 个答案:

答案 0 :(得分:8)

尝试:

li{display:inline-block;}

li{float:left;}

答案 1 :(得分:3)

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

答案 2 :(得分:2)

替换

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

答案 3 :(得分:1)

假设您需要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*/
}

答案 4 :(得分:1)

使用float作为您的元素,如下所示:

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

答案 5 :(得分:0)

尝试使用:

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

答案 6 :(得分:0)

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

<ul class="list-group">

或者:

<ul class="OnePerLine">

.OnePerLine {
flex-direction: column;
}

答案 7 :(得分:-2)

Use the float property, like:

li{
    float: left;
}

or

li{
    float: right;
}