並排放置ul li內容

我有一些ul li內容，如下圖所示。這個內容是垂直的。但我想將它們水平放置。我怎樣才能做到這一點？？並排放置ul li內容

2016-07-22 abu abu

在你的CSS代碼添加此

ul{ 
 
    display:inline-block; 
 
    }

<ul>Apple 
 
<li>Iphone</li> 
 
<li>Iphone 6s</li> 
 
</ul> 
 
<ul>Samsung 
 
<li>Galaxy</li> 
 
<li>galaxy s7</li> 
 
</ul>

來源

2016-07-22 05:52:04 Lakshmi

使用本

#ul_top_hypers li { 
    display: inline; 
}

來源

2016-07-22 05:54:24

你可以一個浮動添加到每個智能手機家族是這樣的：

#div_element{ 
     display: inline-block; 
     float: left; 
}

來源

2016-07-22 06:01:23

使用display屬性安排UL並排的內容。按照下面的語法： -

.ul_content{ 
    display: inline-block; 
}

如果它仍然無法正常工作，可能是寫了它的東西。所以只需在屬性值後添加！重要的關鍵字。即

display: inline-block !important;

我希望它的工作！ :)

來源

2016-07-22 08:04:30

您可以使用UI

HTML上面一個共同的div：

<body> 

<div class="box"> 
<h4>Apple</h4> 
<ul class="lists"> 
    <li>iPhone 6s Plus</li> 
     <li>iPhone 6s </li> 
     <li>iPhone 5s Plus</li> 
     <li>iPhone 5s</li> 
     <li>iPhone 6s Plus</li> 
     <li>iPhone 6s </li> 
     <li>iPhone 5s Plus</li> 
     <li>iPhone 5s</li> 
</ul> 
</div><!--end of box--> 

<div class="box"> 
<h4>Samsung</h4> 
<ul class="lists"> 
    <li>Samsung Guru</li> 
     <li>Samsung galaxy Y </li> 
     <li>Samsung 6</li> 
     <li>Samsung 7</li> 
</ul> 
</div><!--end of box--> 


</body>

CSS：

.box{ 
     display: inline; 
     width: 20%; 
     float: left; 
     padding: 20px; 
     background-color: rgba(0,0,0,0.05); 
     margin: 10px; 
    } 
    h4{ 
     font-size: 20px; 
     margin: 0; 
     padding: 0; 
     padding-bottom: 10px; 
    } 
    ul{ 
    margin: 0; 
     padding: 0; 
    } 
    ul li { 
    list-style-type: none; 
    font-size: 15px; 
    }

來源

2016-07-22 10:24:52

並排放置ul li內容

回答

相關問題