Question

我有两个ul并联的问题。我已经尝试了一切，边距0自动，文本对齐居中等等...我基本上希望ul显示为内联和居中。我知道那不可能这样......

<div class="html">
 <ul>
  <li><img src="pic1.png"></li>
  <li><img src="pic2.png"></li>
  <li><img src="pic3.png"></li>
 </ul>

<div class="php">
 <ul>
  <li><img src="pic1.png"></li>
  <li><img src="pic2.png"></li>
  <li><img src="pic3.png"></li>
 </ul>




.html ul, .php ul {
    width: 100%;
    margin: 0 auto;
    list-style-type: none;
    padding: 40px 0;
}

.html li, .php li {
    padding-right: 10px;
    padding-bottom: 20px;   
}

感谢您的帮助...

Answer 1

请尝试以下操作： Demo

.html,  .php {
    width: 50%;
    display:block;
     margin: 0 auto;
    list-style-type: none;
    padding: 40px 0;
    float:left;
    overflow:hidden;

}
.html ul, .php ul {   
    list-style-type: none;   
    text-align:center;     
    border:1px solid gray;
}

.html li, .php li {
    padding-right: 10px;
    padding-bottom: 20px;

}

在CSS中，我根据您的HTML代码为width (50%)的外部容器指定了<UL>，并让float并排输出。

HTML结构：

<div class="html">
    <ul>
        <li>
            <img src="pic1.png" />
        </li>
        <li>
            <img src="pic2.png" />
        </li>
        <li>
            <img src="pic3.png" />
        </li>
    </ul>
</div>
<div class="php">
    <ul>
        <li>
            <img src="pic1.png" />
        </li>
        <li>
            <img src="pic2.png" />
        </li>
        <li>
            <img src="pic3.png" />
        </li>
    </ul>
</div>

我如何让两个ul并联居中？

1 个答案: