Question

目前我正在制作包含图片的列表。它几乎可以工作，但我有一个问题。我的列表不应放在容器中。这是一些代码。

<div class="container">
<ul>
<li>
<div class="person1test">
  <div class="personOverlay">
  <div class="info"><span class="naam"> text </span>
  <span class="functie"> text </span></div>
 </div>
 </div></li>
<li>
<div class="person1test">
 <div class="personOverlay">
  <div class="info"><span class="naam">text </span>
   <span class="functie"> text </span></div>
  </div>
  </div></li>
<li>
<div class="person1test">
 <div class="personOverlay">
  <div class="info">
   <span class="naam"> text </span>
   <span class="functie">text</span></div>
</div>
</div></li>

</ul>
     <div class="clearer"></div>
 </div>

现在这是html，你可以看到我使用的“更清晰”的类，因为我浮动了列表元素。这是css。

.container{
height: 350px;
}

.container ul{
width: 130%;
overflow: hidden;
list-style-position: inside;
}

.container ul li{
float: left;
list-style: none;
}

我希望我明确说明我的问题是什么，因为英语不是我的主要语言。

Answer 1

错误：此css

.container ul{
  width: 130%;
  overflow: hidden;
  list-style-position: inside;
}

将ul的宽度设置为容器宽度的130％。这意味着如果容器是100px，那么ul将是130px并且容易地移出容器。制作ul width to be 100%，但是如果ul有一些填充或左边缘设置（比如10px），那么因为它必须是100px宽，它将超出容器使其看起来总共110px。 / p>

<强>解决方案：因此，将宽度设置为100％并在其上移除和填充或边距或保留边距和填充，并使宽度达到90％左右，这将使您的UI得到修复。

Answer 2

您应将<div class="container">的高度等于自动。它会解决您的问题。

我的<ul>元素在容器之外

2 个答案: