[英]How do I set a background-color for the width of text, not the width of the entire element, using CSS?
[英]How do I make my background-color fill entire width of div when applied to a `ul li`?
我正在使用 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;
}
将此添加到您的 CSS 文件中:
.ui-layout-pane-east {
padding: 0 !important;
}
不要从浏览器的检查器中执行此操作。 jQuery UI 的内部工作应该在页面加载时计算宽度。
尝试删除
padding: 10px
来自以下css
body > div.ui-layout-east.ui-layout-pane.ui-layout-pane-east
这是您编辑的工作 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.