0

我的导航栏目前正在将我所有的文本一起处理。我有下拉列表的“标题”，标题没有强制一行。

HTML 如下所示：

<li><p>Services</p><ul>
    <li id="ITServices"><p>IT Services</p></li>
    <li><a href="port_collab_work.html">Portals, Collaboration & Workflows</a></li>
    <li><a href="business_intel_dash.html">Business Intelligence & Dashboards</a></li>
    <li><a href="mobile_development.html">Mobile Development</a></li>
    <li><a href="custom_application_development.html">Custom Application Development</a></li>
    <li id="healthcare"><p>Healthcare Services</p></li>
    <li><a href="healthcare.html">EMR, ICD 10 and Healthcare Consulting</a></li>
</ul></li>

CSS 看起来像这样：

#healthcare p {
    width: 280px;
    margin-left: 0px;
    padding: 0px;
    display: inline;
}

#ITServices p {
    width: 280px;
    margin-left: 0px;
    padding: 0px;
    display: inline;
}

.navbar li:hover ul {
    left: 15px;
    top: 40px;
    background: #7FBA00;
    padding: 1px;
    width: 280px;
    border: none;
    text-align: left;
}

.navbar li:hover ul a {
    margin: -7px -10px -7px -15px;
    text-align: left;
    padding: 0px 0px 0px 10px;
    display: block;
    font-size: 11px;
    width: 259px;
    line-height: 25px;
    color: #000;
    background-color: #F0F0F0;
    text-decoration: none;
    border-left: 10px solid #7FBA00;
    border-bottom: 1px solid transparent;
    border-right: 1px solid transparent;
    border-top: 1px solid transparent;
}

.navbar li:hover ul a:hover {
    background: #7FBA00;
    border-left: solid 10px #fff;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    width: 260px;
}

啊！对？我试图让它全部显示在一个列表中，每个 li 元素之后基本上都有换行符。帮助？

4

1 回答 1

0

基本上，一条规则凌驾于你的风格之上。display调用的属性block使元素表现得像块元素，从而覆盖整行。

您的使用可能如下，所以试试这个

li > ul li { display: block; }
于 2013-04-21T02:48:02.837 回答