CODEWITHSUNDEEP
javascripthtmlcss
coder
coder

Reputation: 1929

li elements to occupy the whole width of the screen

I am making a simple mobile site. In one part of it, I have an unordered list.

<ul id="list" class="sortable"></ul>

which follows these css rules:

.sortable,li {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    li {

        list-style: none;
        border: 1px solid #CCC;
        background: #F6F6F6;
        color: #1C94C4;
        margin: 5px;
        padding: 5px;
        height: 22px;
    }
    li.sortable-placeholder {
        border: 1px dashed #CCC;
        background: none;
    }

The li elements are dynamically added via javaScript. The problem I have is that the output is not covering the whole width of the screen. There is a lot of space left at the starting, as evident in the screenshot:

enter image description here

What's wrong? What should I do? How do I fix this?

Upvotes: 0

Views: 149

Answers (2)

Sanchit
Sanchit

Reputation: 2260

Try this:

Make the ul containing that li to have no margin or padding.

#list { margin:0; padding:0; }

You can also try adding a display:block to your li css.

Edit (thanks elclanrs): UL and LI are both block level elements. It's just your margin/padding on the ul which is to blame.

Upvotes: 2

Merlin
Merlin

Reputation: 4917

ul#list{
    margin:0;
    padding:0;   
}

FIDDLE EXAMPLE

Upvotes: 1

Related Questions