相关疑难解决方法(0)

我有一个(XHTML严格)页面,我将图像与常规段落的文本一起浮动.一切顺利,除非使用列表而不是段落.列表的项目符号与浮动图像重叠.

更改列表或列表项的边距没有帮助.边距是从页面左侧计算的,但浮动将列表项推送到自身内部的右侧li.因此,如果我将其宽于图像,则边距仅有帮助.

浮动图像旁边的列表也可以,但我不知道列表何时在浮点旁边.我不想在我的内容中浮动每个列表只是为了解决这个问题.此外,当图像浮动到列表的右侧而不是左侧时,浮动左侧会混淆布局.

设置li { list-style-position: inside }确实会将项目符号与内容一起移动,但它也会导致换行的行开始与项目符号对齐,而不是与上面的行对齐.

问题显然是由于子弹在盒子外面呈现,浮子将盒子的内容推到右边(而不是盒子本身).这就是IE和FF如何处理这种情况,据我所知,根据规范没有错.问题是,我该如何预防呢？

我在w3schools上阅读了以下代码,并且不明白该overflow属性将如何影响文本是否出现在右侧ul.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

a {
  display: block;
  width: 60px;
  background-color: #dddddd;
  padding: 8px;
}

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>

我知道这overflow:hidden用于处理超出范围的内容,但不了解它在这种情况下的应用方式.

我有一个段落后跟一个无序列表,有几个列表项.我的左边还有一张图像浮动.我遇到的问题是列表项边距/填充与该图像重叠.

我希望图像旁边的项目符号可以缩进.

这是我编写的用于调试的测试,您可以在其中查看我的问题.

所有这些都在CMS内部,因此图像尺寸是可变的,以及文本中的段落和可能的列表.

有解决方案吗

(请参阅我对图片的第一条评论.)