李一個接一個的訂購

我不明白爲什麼下面的代碼是像圖片中那樣排列的。李一個接一個的訂購

每個「李」組應該一個接一個地訂購，所以下一個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!

任何想法如何做到這一點？

感謝

來源

2014-11-22 zeeks

請添加：'.option {display：inline-block; }'並避免在同一頁面中多次使用相同的id。 – emmanuel 2014-11-22 18:54:04

@emmanuel非常感謝你。有效！關於id，這只是一個例子，它是從用戶id自動生成的，並且是唯一的。 – zeeks 2014-11-22 19:01:43

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

注意： 避免使用IDS，除非是很重要的。並且始終避免在一個HTML頁面中使用相同的ID。

來源

2014-11-22 19:00:49 Junaid

謝謝你的回答。 – zeeks 2014-11-22 19:03:42

找到我的答案有幫助嗎？然後請將其標記爲正確。謝謝 – Junaid 2014-11-22 19:06:51

一個簡單清晰的在你的李可以解決這個問題。請不要將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; 
}

來源

2014-11-22 18:56:55

謝謝你的回答。 – zeeks 2014-11-22 19:05:20

@zeeks沒問題！讓我知道這是否修復了一切，或者是否需要更改。 – 2014-11-22 19:06:09

您需要使用明確的修爲浮動元素：

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>

CSS：

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

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

演示本身：

http://jsfiddle.net/zrhafhLe/

您必須創建一個容器，該容器在其自身浮動塊之後將清除。更多關於clear fix

P.S .: multiple id s不好，內聯樣式非常糟糕，請改用類和CSS樣式表。

來源

2014-11-22 19:02:18 volter9

謝謝你的答案和提示。 – zeeks 2014-11-22 19:04:46

@zeeks不客氣！ :)'kot'是否意味着'貓'？或者這是別的？ – volter9 2014-11-22 21:04:28

李一個接一個的訂購

回答

相關問題