UL takes up full width without a width set

M

4

6

I want the width of the UL to match the longest text in a li however if i do not set a width for my ul (currently 28.5%) it just takes up 100%. Have tried using max-width but that failed too.

code:

<ul class="nav-shop">
            <li class="nav-shop-sub">
                    <a href="mylink">Link</a>
                    </li>

             <li class="nav-shop-sub">
                    <a href="mylink">Link2</a>
                    </li>
</ul>

CSS:

ul.nav-shop {
    width: 28.5%;
    background: #15a2e7;
    min-height: 38em;
    margin: -11px;
}
li.nav-shop-sub {
    padding-left: .83333em; 
    display: block;
    float: left;
    margin-top: 20px;
    margin-bottom: -25px;
    width: 96%;
}
li.nav-shop-sub:hover {
    background: #f2f2f2!important;  
}
li.nav-shop-sub:hover a {
    color: #2980b9!important;   
}
li.nav-shop-sub>a {
    border-bottom: 1px dotted #999;
    display: inline-block!important;
    font-size: 1.1667em;
    line-height: 1.429;
    margin: -1px;
    padding: .42857em .28571em .57143em!important;
    position: relative!important;
    width: 100%; 
    color: #ffffff!important;
}
div.grid.nav-shop-wrapper.has-product-noms::before, ul.grid-item.list-stacked.link-list::before {
    display: table;
    content: "";
}
ul.grid-item.list-stacked.link-list::after, div.grid.nav-shop-wrapper.has-product-noms::after {
    clear: both;
    display: table;
    content: "";
}

Note that this is the original CSS. Have tried removing all mentions of width but the same thing happens.

Mnemonic answered 8/1, 2015 at 9:6 Comment(0)

S

5

Remove

width: 28.5%;

and add

display: inline-block;

into

ul.nav-shop {

Soapbark answered 8/1, 2015 at 9:10 Comment(3)

still fulfills 100% of it's container – Mnemonic 8/1, 2015 at 9:14

Well I don't know what your page looks like, if you want to provide that information, then do so (As you can see mine is a working version), so that means by plugging it back into your site, it's not working, there's an issue in your code elsewhere. – Soapbark 8/1, 2015 at 9:48

I'm not going to visit your page, however if you provide the code necessary I'll take a look at it. If you want help, you have to do all the leg work. – Soapbark 8/1, 2015 at 9:54

I

3

You must set the rule display in the ul

display: inline-block;

Intensive answered 8/1, 2015 at 9:9 Comment(1)

still fulfills 100% of it's container – Mnemonic 8/1, 2015 at 9:14

M

2

You can use

display: inline-block,

but this property can some time cause spacing to the bottom in your page.

So you can use

float: left

to compensate.

Mob answered 8/1, 2015 at 9:18 Comment(0)

G

1

Yes, ul is a block level element so it takes full width. If you want to specify element width you can use inline-block.

Galloglass answered 8/1, 2015 at 9:8 Comment(2)

I don't want a set width – Mnemonic 8/1, 2015 at 9:16

still fulfills 100% of it's container – Mnemonic 8/1, 2015 at 9:17

Recommended topics

Hot tags