css ul li超出div

erhoui1w 于 2023-06-07 发布在其他

关注(0)|答案(4)|浏览(281)

我在div中创建了li。但是，li显示在div之外。

.container>div {
  width: 50%;
  border: 1px solid red;
}

div ul {
  list-style-type: none;
}

ul li {
  font-weight: 700;
  float: left;
  width: 48%;
}

<div class="container">
  <div>
    <ul>
      <li>Hello</li>
      <li>Hi</li>
      <li>There</li>
      <li>Where</li>
    </ul>
  </div>
</div>

jsfiddle：http://jsfiddle.net/zfvck809/

css

来源：https://stackoverflow.com/questions/32458087/ul-li-going-outside-of-div

4条答案

按热度按时间

xghobddn1#

您没有清除float，这意味着<ul>的高度不受li标记的影响。有很多方法可以清除浮点数，但是当你需要清除容器上的浮点数时，这个方法很有效：

ul {
    overflow: auto;
}

示例：

.container>div {
  width: 50%;
  border: 1px solid red;
}

div ul {
  list-style-type: none;
  overflow: auto;
}

ul li {
  font-weight: 700;
  float: left;
  width: 48%;
}

<div class="container">
  <div>
    <ul>
      <li>Hello</li>
      <li>Hi</li>
      <li>There</li>
      <li>Where</li>
    </ul>
  </div>
</div>

赞(0）回复(0）举报 2023-06-07

waxmsbnn2#

你必须清除float：left指令：

<div class="container" style="width:100%">
   <div style="width:50%;border:1px solid red;">
    <ul>
        <li>Hello</li>
        <li>Hi</li>
        <li>There</li>
        <li>Where</li>
    </ul>
    <div class="clearer"></div>
    </div>
</div>

CSS : 
.clearer {
 height:0;
 clear:both;
}

赞(0）回复(0）举报 2023-06-07

wfsdck303#

你只需要清除给列表项的浮动。
试试下面的方法。

div ul{
        list-style-type:none;
    }


div ul:before,
div ul:after {
    content:"";
    display:table;
}

div ul:after {
    clear:both;
}

    ul li{
       
        font-weight:700;
        float:left;
        width:48%;
    }

<div class="container" style="width:100%">
    <div style="width:50%;border:1px solid red;">
        <ul>
            <li>Hello</li>
            <li>Hi</li>
            <li>There</li>
            <li>Where</li>
        </ul>
    </div>
</div>

赞(0）回复(0）举报 2023-06-07

mcdcgff04#

这将使其保持在 Package 器内：