Question

我希望UL的宽度与li中最长的文本相匹配，但如果我没有为我的ul设置宽度（目前为28.5％），它只占用100％。尝试过使用max-width，但也失败了。

代码：

<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: "";
}

请注意，这是原始CSS。尝试删除宽度的所有提及，但同样的事情发生。

Answer 1

删除

width: 28.5%;

并添加

display: inline-block;

进入

ul.nav-shop {

Answer 2

是的，ul是一个块级元素，因此需要全宽。如果要指定元素宽度，可以使用inline-block。

Answer 3

您必须在ul

中设置规则显示

display: inline-block;

Answer 4

您可以使用

display: inline-block,

但是此属性可能会导致页面中底部的间距。

所以你可以使用

float: left

补偿。

UL占据全宽而没有宽度设置

4 个答案: