html - 当应用于 `ul li` 时，如何使我的背景颜色填充整个 div 宽度？

Question

我正在使用 jQuery-UI-Layout 插件在屏幕的东侧创建一个 Pane 。当我在其中创建一个列表并为每个 <li> 应用背景色时元素，它不会跨越整个 Pane 的宽度。

我希望 <li> 两边都没有空格，即使它旁边有一个元素符号或数字(意思是如果我决定包含一个元素符号或数字，它也应该被颜色覆盖)。我该怎么做？

fiddle :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 的内部工作原理应该是在页面加载时计算宽度。