Question

我有一些ul li内容，如下图所示。这个内容是垂直的。但是我想把它们水平放置。我怎样才能做到这一点？？

Answer 1

在您的css代码

中添加此内容

＆＃13;

ul{
  display:inline-block;
  }

＆＃13;

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

＆＃13;

Answer 2

使用此

#ul_top_hypers li {
    display: inline;
}

Answer 3

使用display属性并排排列 ul 的内容。请遵循以下语法： -

.ul_content{
    display: inline-block;
}

如果它仍然不起作用，可能有些东西已经过度了。因此，只需在属性值后添加！important 关键字即可。即，

display: inline-block !important;

我希望它有效!! ：）

Answer 4

您可以为每个智能手机系列添加一个浮动，如下所示：

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

Answer 5

您可以在ui

之上使用一个公共div

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：

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

并排放置ul li内容

5 个答案: