Question

我不明白为什么下面的代码是按照图片中的代码排序的。

每个＆＃34; li＆＃34; group应该一个接一个地命令，所以下一个li应该位于处理器li之下。

<li id="2" class="option">
  <img class="profile_image" style="width:50px; height:50px; float:left; margin-right:6px;" src="http://www.emperor-penguin.com/penguin-chick.jpg" alt="prov kot"/>
  <span class="name" style="padding-left:42px;">
    euglen laknori
  </span>
  <br/>
  euglen.laknori
</li>
<li id="2" class="option">
  <img class="profile_image" style="width:50px; height:50px; float:left; margin-right:6px;" src="http://www.emperor-penguin.com/penguin-chick.jpg" alt="prov kot"/>
  <span class="name" style="padding-left:42px;">
    euglen laknori
  </span>
  <br/>
  euglen.laknori
</li>
<li id="2" class="option">
  <img class="profile_image" style="width:50px; height:50px; float:left; margin-right:6px;" src="http://www.emperor-penguin.com/penguin-chick.jpg" alt="prov kot"/>
  <span class="name" style="padding-left:42px;">
    euglen laknori
  </span>
  <br/>
  euglen.laknori
</li>
<li id="2" class="option">
  <img class="profile_image" style="width:50px; height:50px; float:left; margin-right:6px;" src="http://www.emperor-penguin.com/penguin-chick.jpg" alt="prov kot"/>
  <span class="name" style="padding-left:42px;">
    euglen laknori
  </span>
  <br/>
  euglen.laknori
</li>
<li id="2" class="option">
  <img class="profile_image" style="width:50px; height:50px; float:left; margin-right:6px;" src="http://www.emperor-penguin.com/penguin-chick.jpg" alt="prov kot"/>
  <span class="name" style="padding-left:42px;">
    euglen laknori
  </span>
  <br/>
  euglen.laknori
</li>
<li id="2" class="option">
  <img class="profile_image" style="width:50px; height:50px; float:left; margin-right:6px;" src="http://www.emperor-penguin.com/penguin-chick.jpg" alt="prov kot"/>
  <span class="name" style="padding-left:42px;">
    euglen laknori
  </span>
  <br/>
  euglen.laknori
</li>

团体不应该这样订购！

Groups should not order like this!

知道怎么做吗？

由于

Answer 1

您的 li 上的简单明确可以解决此问题。请不要将CSS内联，也不要将数字用作id。

Here is the jsfiddle

HTML：

<li id="2" class="option">
    <img class="profile_image" src="http://www.emperor-penguin.com/penguin-chick.jpg" alt="prov kot"/>
    <span class="name"> euglen laknori </span>
    <br/>
    euglen.laknori
</li>
<li id="2" class="option">
    <img class="profile_image" src="http://www.emperor-penguin.com/penguin-chick.jpg" alt="prov kot"/>
    <span class="name"> euglen laknori </span>
    <br/>
    euglen.laknori
</li>
<li id="2" class="option">
    <img class="profile_image" src="http://www.emperor-penguin.com/penguin-chick.jpg" alt="prov kot"/>
    <span class="name"> euglen laknori </span>
    <br/>
    euglen.laknori
</li>
<li id="2" class="option">
    <img class="profile_image" src="http://www.emperor-penguin.com/penguin-chick.jpg" alt="prov kot"/>
    <span class="name"> euglen laknori </span>
    <br/>
    euglen.laknori
</li>
<li id="2" class="option">
    <img class="profile_image" src="http://www.emperor-penguin.com/penguin-chick.jpg" alt="prov kot"/>
    <span class="name"> euglen laknori </span>
    <br/>
    euglen.laknori
</li>
<li id="2" class="option">
    <img class="profile_image" src="http://www.emperor-penguin.com/penguin-chick.jpg" alt="prov kot"/>
    <span class="name"> euglen laknori </span>
    <br/>
    euglen.laknori
</li>

CSS：

li {
    clear: both;
}
img {
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 6px;
}
span {
    padding-left:42px;
}

Answer 2

JSFiddle

像这样的东西

<强> HTML

<li class="option">
  <img class="profile_image" style="width:50px; height:50px; float:left; margin-right:6px;" src="http://www.emperor-penguin.com/penguin-chick.jpg" alt="prov kot"/>
  <span class="name" style="padding-left:42px;">
    euglen laknori
  </span>
  <br/>
  euglen.laknori
</li>
<li class="option">
  <img class="profile_image" style="width:50px; height:50px; float:left; margin-right:6px;" src="http://www.emperor-penguin.com/penguin-chick.jpg" alt="prov kot"/>
  <span class="name" style="padding-left:42px;">
    euglen laknori
  </span>
  <br/>
  euglen.laknori
</li> ...... // other lis

<强> CSS

.option{
  clear: right;
}

<强>注意：除非重要，否则请避免使用ID。并始终在一个html页面中避免使用相同的ID。

Answer 3

您需要对浮动元素使用明确的修复：

HTML code：

<li class="option">
    <div class="clearfix">
        <img class="left profile_image" src="http://www.emperor-penguin.com/penguin-chick.jpg" alt="prov kot" />
        <span class="name">
            euglen laknori
        </span>
        <br/> euglen.laknori
    </div>
</li>

CSS：

.clearfix:after {
    content: "";
    font-size: 0px;

    clear: both;
    display: block;
    height: 0px;
    width: 100%;
}

演示本身：

http://jsfiddle.net/zrhafhLe/

你必须创建一个容器，它将自己浮动块后清除。有关clear fix

的更多信息

P.S。：多个id s不好，内联样式非常糟糕，请改用类和CSS样式表。

李先生一个接一个地点

3 个答案: