Question

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

我希望<li>的任何一侧都没有空格，即使它旁边有一个子弹或数字（意思是如果我决定包含子弹或数字，它应该也被颜色覆盖）。我怎么能这样做？

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文件中：

print_r($xml)

请勿从浏览器的检查器执行此操作。 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

以下是您编辑的working Fiddle，其中列表样式光盘“在实际列表项目内”，使用list-style-position样式。要删除光盘图标，请简单使用“无”样式。

如果将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
}

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

希望有所帮助！ Michael G

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

4 个答案: