将所有内容并排放置
[英]Place ul li content side by side
问题描述
I have some ul li content like the below image. 
我有一些下图所示的内容。 This contents are coming vertically. 这些内容是垂直出现的。 But I would like to place them horizontally. 但是我想将它们水平放置。 How can I do that ?? 我怎样才能做到这一点 ？？
5 个解决方案
解决方案1
2 2016-07-22 05:52:04
Add this in your css code 将此添加到您的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>
解决方案2
2 2016-07-22 05:54:24
use this 用这个
#ul_top_hypers li {
display: inline;
}
解决方案3
1 2016-07-22 08:04:30
Use display property to arrange the content of ul side by side. 使用显示属性可以并排排列ul的内容。 Follow the syntax below:- 请遵循以下语法：
.ul_content{
display: inline-block;
}
If it still not works, may be something is over writing it. 如果仍然无法正常工作，则可能是写完了。 So just add !important keyword after property value. 因此，只需在属性值之后添加！important关键字即可。 ie, 即
display: inline-block !important;
I hope it works!! 我希望它能工作！ :) :)
解决方案4
0 2016-07-22 06:01:23
You could add a float to each smartphone family like this: 您可以像这样向每个智能手机系列添加浮点数：
#div_element{
display: inline-block;
float: left;
}
解决方案5
0 2016-07-22 10:24:52
You can use one common div above the ui 您可以在ui上方使用一个普通的div
html: 的HTML：
<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: 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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.