Question

我试图在SharePoint的Web部件中使用水平列表。我一遍又一遍地查看这些代码，无法找到问题所在。出于某种原因，列表仍然垂直显示。有什么想法吗？

CSS

ul{
        padding: 0;
        list-style: none;
        width:100%;
        text-align:center;
        height: 100px;
        background: #ffffff no-repeat center;
    }
    ul li{
        display:inline-block;
        float: left;    padding: 25px 25px 0 125px;
        margin: 0;
        position: relative;
        font-size: 25px;    font-weight: bold;  color: #FFFFFF; 
        text-align: center;
    }
    ul li a{
        display: block;
        color: #FFF;    padding: 10px 5px;
        text-decoration: none;
    }
    ul li a:hover{

    }
    ul li ul.dropdown{
        min-width: 150px; /* Set width of the dropdown */
        width: 100%;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
        float: left;
    }
    ul li:hover ul.dropdown{
        display: inline;    /* Display the dropdown */
        background: #FFFFFF;
        left: 0;
        width:100%;
        margin:0;
        padding:0;

    }
    ul li ul.dropdown li{
        display: inline;
        float: left;
        background: #FFFFFF;
    }

HTML列表（仍在进行中;只是在修复所有文本/链接之前进行测试）

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
        <a href="#">Current Performance &#9662;</a>
        <ul class="dropdown">
            <li><a href="#">Grafenwoehr</a></li>
            <li><a href="#">Hohenfels</a></li>
            <li><a href="#">Katterbach</a></li>
    <li><a href="#">Stuttgart</a></li>
    <li><a href="#">Vilseck</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

多年来我还没有完成这些工作，但我的老板要我尝试做这项工作。 -_-

Answer 1

你有一个下拉列表

ul li ul.dropdown {
    width: 100%;
}

相对于

具有100％的宽度

ul li {
    position: relative; 
}

这是罪魁祸首。删除上面的“位置：相对”可以解决您的问题。

Answer 2

display:block上的UL.dropdown和display:inline-block上的UL.dropdown LI。{/ p>

Answer 3

您的ul.dropdown水平浮动，但其width强制元素垂直排序。要对此进行测试，您可以将其min-width设置为900px：DEMO

由于您的ul.dropdown是其父li的子级，已设置为display: inline-block; position: relative;，因此使用width: 100%将其绑定到其边界。

要解决此问题，您可以移除position: relative个li元素以删除此边框。现在它的width: 100%与您的body相关联。

WORKING DEMO

Answer 4

从“ul li”列表中删除（position：relative;）将水平放置。代码就像：

ul li{
    display:inline-block;
    float: left;    
    padding: 25px 25px 0 125px;
    margin: 0;
    font-size: 25px;    
    font-weight: bold;  color: #FFFFFF; 
    text-align: center;
}

只需将此代码替换为您的代码即可。谢谢

使用CSS水平显示下拉菜单

4 个答案: