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

Question

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

我希望 <li> 两边都没有白色 space，即使它旁边有项目符号或数字（意思是如果我决定包括项目符号或编号，它也应该被颜色覆盖）。我该怎么做？

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

尝试删除

padding: 10px

来自 css

中的以下内容

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

Answer 2

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

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

不要在浏览器的检查器中执行此操作。 jQuery UI 的内部工作原理应该是在页面加载时计算宽度。

Answer 3

这可能不是最好的方法，但您可以扩大 <li> 的边距以填充窗格。

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

JSFiddle

Answer 4

这是您编辑的 working Fiddle，带有列表样式光盘 "inside" 实际列表项，使用 list-style-position 样式。要删除光盘图标，只需使用 "none" 样式即可。

如果您将字体大小设置为 0px，这将从列表项中删除所有白色 space，只要列表项具有示例中显示的给定字体大小。

我刚刚为您的工作添加了一点 CSS CSS:

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

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

我还添加了主体样式来删除默认的 8px 边距，以显示列表项的左侧或右侧没有白色 space。

希望对您有所帮助！迈克尔 G

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

How do I make my background-color fill entire width of div when applied to a `ul li`?

html

css

html-lists