Html 李先生一个接一个地点菜

我不明白为什么下面的代码像图中的一样排列

每个“li”组应该一个接一个地排序，因此下一个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>

尤格伦·拉克诺里


尤格伦·拉克诺里


尤格伦·拉克诺里


尤格伦·拉克诺里


尤格伦·拉克诺里


尤格伦·拉克诺里


尤格伦·拉克诺里


尤格伦·拉克诺里


尤格伦·拉克诺里


尤格伦·拉克诺里


尤格伦·拉克诺里


尤格伦·拉克诺里

团体不应该这样订购

你知道怎么做吗

---

谢谢

您的li上的一个简单的清除可以解决这个问题。请不要将CSS内联，也不要使用数字作为id

HTML:

像这样的

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

注意事项：

---

避免使用ID，除非它很重要。并且始终避免在一个html页面中使用相同的ID。

您需要对浮动元素使用clear fix：

HTML代码：

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

演示本身：

您必须创建一个容器，它将在自身浮动块后清除。 更多关于

---

注意：多个

id

S不好，内联样式很差，请使用类和CSS样式表。

请添加：

。选项{display:inline block；}

并避免在同一页面中多次使用同一id。@emmanuel非常感谢您。成功了！关于id，这只是一个示例，它是根据用户id自动生成的，并且是唯一的。@zeeks没问题！让我知道这是否解决了所有问题，或者您是否需要一些更改。是否觉得我的答案有帮助？那么请把它标对。Thanks@zeeks不客气！：）kot

kot

是“猫”的意思吗？或者是别的什么？

<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

.option{
  clear: right;
}

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

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

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