css ul li超出div

erhoui1w  于 2023-06-07  发布在  其他
关注(0)|答案(4)|浏览(280)

我在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/

xghobddn

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>
waxmsbnn

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

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>
mcdcgff0

mcdcgff04#

这将使其保持在 Package 器内:

list-style-position: inside;

相关问题