Question

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

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元素后基本上都有换行符。帮助

Answer 1

基本上，一条规则会超越你的风格。名为display的{{1}}属性使元素的行为类似于块元素，从而覆盖整行。

您的使用可能如下，请尝试使用

block

强制导航栏上的行（无序列表）？

1 个答案: