时间戳

首页 > 解决方案 > 如何使 HTML 列表环绕浮动内容

html - 如何使 HTML 列表环绕浮动内容

问题描述

假设我有一个 HTML 图形向左浮动，其周围环绕着文本：

<figure style="float:left">…&lt;/figure>
<p>stuff</p>
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
<dl>
  <dt>foo</dt>
  <dd>bar</dd>
</dl>

这很简单；图形将浮动到左侧，段落列表将环绕右侧的图形。

不过，项目符号列表看起来很奇怪。项目符号不会与其上方的段落内容对齐。对于定义 list <dl>，即使我的样式表给出了左边距，<dt>和元素都向左对齐，例如<dd><dd>

原因似乎是浮动元素不会使容器围绕它，而只会使容器 content。所以<ul>不是包装，而是里面的内容。所以<p>和盒子实际上通过<ul>浮动图形向左延伸，只有内容被包裹到右侧。因此左边距是相对于页面左边的，因为浮动的空间比请求的左边距要大得多，所以在内容被包装后不会添加额外的边距。<dl>

现在看来我可以添加一个简单的修复程序，它会神奇地使我的示例页面看起来更好：

ul, ol, dl {
  overflow: auto;
}

基本上，这可以防止边距合并，并基本上使容器本身环绕图形。换句话说，它防止浮动与它们的边距合并。它看起来就像我期望的那样！

但是……这似乎很容易，而且有点不对劲。例如，为什么我不也将其应用于<p>？这会给未来带来什么问题？如果我在某处添加一些背景颜色，如果<p>有一个通过浮动延伸的边距，这会导致问题，但列表没有？

总而言之，当列表环绕浮点数时，使列表看起来正确的最佳方法是什么，并且使用overflow: auto会导致任何意想不到的后果？

标签： htmlcsscss-floatmargin

解决方案

ul, ol, dl,dd {
/*   overflow: auto; */
  padding:0;
  margin:0;
}
ul li{
    /*set position for li style*/
    /*list-style-position: inside;*/
    /*list-style-position: outside; */
    /* or for remove li style */
    list-style: none;

}
.clearfix:after{
  clear:both;
  content:"";
  display:block;
}
.float-right{
  float:right;
}
.float-left{
  float:left;
}
.wrapper{
  background:red;
  width:300px;
}
.wrapper-detail{
  background:blue;
  width:calc(100% - 100px);/* .wrapper's width - figure's with */
}
figure{
  width:100px;
  margin:0;
  background:green;
}
<div class="wrapper clearfix">
  <figure class="float-left">…&lt;/figure>
  <div class="wrapper-detail float-right">
    <p>stuff</p>
    <ul>
      <li>foo</li>
      <li>bar</li>
    </ul>
    <dl>
      <dt>foo</dt>
      <dd>bar</dd>
    </dl>  
  </div>
</div>

推荐阅读