Question

我正在使用小提琴重现一个错误，但它总是在小提琴中起作用，而不是在网站上。

它只是p标签的水平分组。

在小提琴中它运作良好。请参阅here。

这是HTML

   <div id='mi_control' class='radius_all'>
      <p id='mi_cover_l' class='menu_bottom small_dark'>Foo &copy;</p>
      <p id='mi_about_l' class='menu_bottom small_dark'>About</p>
      <p id='mi_privacy_l' class='menu_bottom small_dark'>Privacy</p>
      <p id='mi_team_l' class='menu_bottom small_dark'>Contact</p>
      <p id='mi_arc_l' class='menu_bottom small_dark'>Developers</p>
    </div>

然而，在Web应用程序中却没有。请参阅here。

我已经在重置，常见的css和模块特定的css中添加了，以及浏览器调用用户代理css的内容。

以下是Chrome浏览器中已打开CSS的CSS屏幕截图。

如果我能打破这个小提琴，就像网站被打破一样，我会知道造成这个问题的原因。

Answer 1

这可能会对你有所帮助：

#mi_control {
    position: absolute;
    top: 220px;
    left: -17px;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 400px;
}

Answer 2

您遇到的问题是您不断使用position: absolute;来定位元素。这将从文档流中删除元素，除非您设置它们，否则它们不会继承宽度。如果您检查div，则会发现他们的宽度都已折叠。

理想情况下，不希望将position: absolute;用于一般布局。

我已经在jsfiddle上举了一个例子来向你展示你的代码在另一个position: absolute;中被包裹时会发生什么。你会看到浮动的元素会突破到新的行上以占用少量宽度尽可能。它没有在你的jsfiddle上显示为错误，因为父元素是一个块并且没有设置position: absolute;。

https://jsfiddle.net/odx0chnf/8/

Answer 3

原因是你的容器<div id="mi_holder" class="proof_of_existance">没有高度或宽度，所以div <div id="mi_control" class="radius_all">正在尝试适应这个空间，只是扩展以适应内容。

由于您没有具有固定宽度的容器，因此正在包装文本。同时，JSFiddle框架是div的容器，不需要包装文本。如果您将JSFiddle框架的宽度更改为0，您将看到相同的问题。

您可以通过更改mi_control div的宽度来解决您遇到的问题，以适应内容，如另一个答案所示。

这个小提琴和这个网站有什么区别？

3 个答案: