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

I'm using jQuery-UI-Layout plugin that creates a pane on the east side of the screen. When I create a list in it and apply a background-color to each <li> element, it doesn't span the width of the entire pane.

我正在使用jQuery-UI-Layout插件在屏幕的东侧创建一个窗格。当我在其中创建列表并将背景颜色应用于每个

元素时,它不会跨越整个窗格的宽度。

I would like it so that there is no white space on either side of the <li>, even if it has a bullet or number next to it (meaning if I decide to include a bullet or number, it should also be covered by the color). How can I do this?

我希望它能够在

的任何一侧都没有空白区域,即使它旁边有一个子弹或数字(意思是如果我决定包括一个子弹或数字,它也应该由颜色)。我怎样才能做到这一点?

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;
}

4 个解决方案

#1

Add this to your CSS file:

将其添加到您的CSS文件中:

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

Don't do this from the browser's inspector. jQuery UI's inner workings are supposed to calculate widths on page load!

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

#2

Try Removing the

尝试删除

padding: 10px

from the following in css

来自css中的以下内容

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

#3

It might not be the best way of doing it, though you can expand the margins of the <li> to fill the pane.

尽管您可以扩展

的边距以填充窗格,但这可能不是最好的方法。

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

JSFiddle

#4

Here is your edited working Fiddle, with a List Style Disc "inside" the actual list item, by using the list-style-position style. To remove the Disc icon, simple use the style "none" instead.

这是您编辑的工作小提琴,使用list-style-position样式在实际列表项“内部”列出样式光盘。要删除光盘图标,只需使用“无”样式。

If you set the font-size to 0px and that will remove all white space from list items, as long as the list item has a given font size which is shown in the example.

如果将font-size设置为0px并且将从列表项中删除所有空格,只要列表项具有给定的字体大小,如示例所示。

I just added a little CSS to your working CSS:

我刚刚为你的CSS添加了一些CSS:

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

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

I also added a body style to remove the default margin of 8px to show you that there is no white space to left or right of the list items.

我还添加了一个体型来删除默认的8px边距,以显示列表项左侧或右侧没有空格。

Hope that helps! Michael G

希望有所帮助!迈克尔·G

#1