2列CSS列表突破，當一邊是大膽的

Question

這是我認爲應該是直截了當的，但我似乎無法弄清楚，並花了幾個小時在一個單一的列表讓我瘋狂。

我想要做的是創建一個2列的列表，一邊是「標籤」，另一邊是值。如果我保持字體權重正常，或者雙面都是粗體，那麼我可以讓它起作用，但只要我將標籤變爲粗體並且值正常，它就會樓梯。

A screenshot of it with bold

適用的CSS：

ul.info { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

ul.info li.name { 
    width: 150px; 
    float: left; 
    font-weight: bold; 
} 

ul.info li.value { 
} 

的HTML：

<ul class="info"> 
    <li class="name">Member Since</li> 
    <li class="value"><?=$user->registerTime ?></li> 

    <li class="name">Last Logged in</li> 
    <li class="value"><?=($user_login !== null ? $user_login->login_time : 'Never') ?></li> 

    <li class="name">Email verified?</li> 
    <li class="value"><?=($user->emailVerified ? 'Yes' : 'No') ?></li> 
</ul> 

我已經收窄，到大膽，但它沒有任何意義爲什麼會打破它。有任何想法嗎？

Answer 1

我懷疑這會是下到有額外的垂直空間被莫名其妙地加入了大膽的元素，這可以解釋爲什麼浮動不變得交錯。您是否將一致的line-height屬性應用於列表元素？

你會更好使用定義列表，而不是無序列表。通過這種方式，您可以完全分開設計dt和dd元素，並且標記的附加優勢更加語義化。

Answer 2

您可以嘗試將LIs的高度或最小高度設置爲大於粗體字體高度的像素圖。

Answer 3

什麼瀏覽器？它適用於我的Chrome。
我會建議檢查腳本代碼..如果他們正在生成有效的XHTML。

proof