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.
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;
}
Add this to your CSS file:
Don't do this from the browser's inspector. jQuery UI's inner workings are supposed to calculate widths on page load.