在不同瀏覽器中給出不同外觀的列表樣式

我無法弄清楚爲什麼我的'列表樣式：光盤'在不同瀏覽器中給出不同的外觀。請參閱http://www.galadadatingandrelating.com/水色下的「聯繫我們」區域，有3L元素。 -在不同瀏覽器中給出不同外觀的列表樣式

If you want to join us sailing as an individual or a couple, at any time, contact us here. 

If you have a dating and relating question/dilemma feel free to send it here. We may reply to you personally or we may cover it in a blog. 

If you have a question on any of the services, packages, next sailing and exotic islands trips – feel free to ask us here.

現在他們在Firefox之前顯示光盤，但在Chrome中，光盤完全位於左側。

爲什麼Chrome瀏覽器顯示不正確？

來源

2016-04-10 yogihosting

你的CSS中的東西正在改變兩個瀏覽器之間的列表樣式位置。兩者在本地進行相同的定位。無法確切知道改變你的是什麼。 – Rob

是的，我已經注意到，在Chrome瀏覽器中，li變成了全寬。無法弄清楚它們是如何變成全寬的。這在Firefox中並非如此。有什麼建議麼。 – yogihosting

添加list-style-position: inside;到<li>元素：

.line-wrap ul li { 
    list-style-position: inside; 
}

列表例子在行動中看到的問題和解決方案：

ul#one, ul#two { 
 
    text-align:center; 
 
} 
 
ul#two { 
 
    list-style-position: inside; 
 
}

<ul id="one"> 
 
    <li>List</li> 
 
    <li>Number</li> 
 
    <li>One</li> 
 
</ul> 
 
<ul id="two"> 
 
    <li>List</li> 
 
    <li>Number</li> 
 
    <li>Two</li> 
 
</ul>

來自關於inside的規範：
標記框被放置在主體塊框中的第一個內聯框中，在元素的內容之前以及之前：任何僞元素之前。 CSS 2.1沒有指定標記框的精確位置。
https://www.w3.org/TR/CSS2/generate.html#propdef-list-style-position

說明：
在谷歌Chrome list-style-position的默認值是outside：
在Mozilla Firefox也是如此，看來火狐解釋這個規則有點不同！

來源

2016-04-10 14:02:43

感謝它解決了我的問題，但究竟是什麼屬性內？ – yogihosting

在不同瀏覽器中給出不同外觀的列表樣式

回答

相關問題