應用於`ul li`時，如何使我的背景顏色填充div的整個寬度？

Question

我正在使用 jQuery-UI-Layout 插件在屏幕的東側創建一個窗格。 當我在其中創建一個列表並將背景顏色應用於每個<li>元素時，它不會跨越整個窗格的寬度。

我希望<li>兩側沒有空白，即使它旁邊有一個項目符號或數字（這意味着如果我決定包含一個項目符號或數字，它也應該被顏色）。 我怎樣才能做到這一點？

小提琴： http : //jsfiddle.net/5EECD/497/

HTML：

<div class="ui-layout-center">Center</div>

<div class="ui-layout-east">
    <ol id="someList">
        <li class="not-selected">step 1</li>
        <li class="selected">step 2</li>
        <li class="not-selected">step 3</li>
        <li class="not-selected">step 4</li>
    </ol>

</div>

CSS :

.selected {
    background-color: #e90902;
    padding-top: 10px;
    border-bottom: 1px solid #808080;
    padding-bottom: 10px;
}

.not-selected {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #e9e9e9;
    border-bottom: 1px solid #808080;
}

Answer 1

將此添加到您的 CSS 文件中：

.ui-layout-pane-east {
    padding: 0 !important;
}

不要從瀏覽器的檢查器中執行此操作。 jQuery UI 的內部工作應該在頁面加載時計算寬度。

Answer 2

嘗試刪除

padding: 10px

來自以下css

body > div.ui-layout-east.ui-layout-pane.ui-layout-pane-east

Answer 3

這可能不是最好的方法，盡管您可以擴展<li>的邊距以填充窗格。

li{
    margin: 0px -10px 0px -10px;    
}

JSFiddle

Answer 4

這是您編輯的工作 Fiddle ，通過使用 list-style-position 樣式，在實際列表項“內部”有一個 List Style Disc。 要刪除光盤圖標，只需使用樣式“無”即可。

如果您將 font-size 設置為 0px 並且這將刪除列表項中的所有空白，只要列表項具有示例中顯示的給定字體大小。

我只是在您的工作 CSS 中添加了一些 CSS：

ol#someList {
  font-size:0px;
  padding-left:0px;
  list-style:disc;
  list-style-position: inside;
}

ol#someList li {
  font-size:14px
}

我還添加了一個 body 樣式來刪除 8px 的默認邊距，以向您顯示列表項的左側或右側沒有空白。

希望有幫助！ 邁克爾·G