作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这是我的第一个 ;-)
我的下拉菜单有问题。我的文字很长,我想分两行而不是一行。我最近两天都在尝试,但无法正常工作。我将宽度更改为 1 行 - 但它看起来不太好。我很确定我错过了一些简单的东西 - 但我看不到它。
非常感谢任何帮助!
这是我的代码:
我的 HTML:
<ul class="supplier_top_link">
<li>Category 1
<ul class="supplier_1">
<li><a href="#">Sub-Category 1</a>
</li>
<li><a href="#">Sub-Category 2</a>
</li>
<li><a href="#">Sub-Category 3</a>
</li>
<li><a href="#">Sub-Category 4</a>
</li>
</ul>
</li>
<li>Category 2
<ul class="supplier_1">
<li><a href="#">Sub-Category 1</a>
</li>
<li><a href="#">Sub-Category 2</a>
</li>
<li><a href="#">Sub-Category 3</a>
</li>
<li><a href="#">Sub-Category 4</a>
</li>
</ul>
</li>
<li>Category 3
<ul class="supplier_2">
<li><a href="#">Sub-Category 1</a>
</li>
<li><a href="#">Sub-Category 2</a>
</li>
<li><a href="#">Sub-Category 3</a>
</li>
<li><a href="#">Sub-Category 4</a>
</li>
</ul>
</li>
<li>Category 4</a>
<ul class="supplier_2">
<li><a href="#">Sub-Category 1</a>
</li>
<li><a href="#">Sub-Category 2</a>
</li>
<li><a href="#">Very very very long Sub-Category 3</a>
</li>
<li><a href="#">Another long Sub-Category 4 & Category 5</a>
</li>
<li><a href="#">Sub-Category 6</a>
</li>
<li><a href="#">Sub-Category 7</a>
</li>
<li><a href="#">Very long Sub-Category 8</a>
</li>
</ul>
</li>
</ul>
我的 CSS:
.supplier_top_link {
position : relative;
font-size : 14px;
font-weight : 400;
z-index : 3;
}
.supplier_top_link li {
position : relative;
display : inline-block;
}
.supplier_top_link li ul {
position : absolute;
top : 25px;
display : none;
}
.supplier_top_link li:hover ul {
padding-top : 4px;
display : block;
}
.supplier_top_link li ul li {
position : relative;
display : block;
}
.supplier_top_link li ul li a {
color : #a6a6a6;
font-size : 14px;
display : block;
float : left;
background : #191919;
border-top : 1px solid #333;
width : 230px !important;
height:28px;
min-height:28px;
padding : 0 10px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
}
.supplier_top_link li ul li a:hover {
color : white;
border-top : 1px solid #ff6c00;
}
.supplier_1 li a {
text-align:left;
}
.supplier_2 {
margin-left:-150px;
}
.supplier_2 a {
text-align:right;
padding-right:15px;
}
最佳答案
您可以只包装 <a>
的内容s 在 <span>
,比如:
<li><a href="#">
<span><span>Very very very long Sub-Category 3</span></span>
</a></li>
然后在您的 CSS 中添加如下内容:
.supplier_top_link li ul li a span {
width: 150px !important;
display: inline-block;
}
并可能删除 <a>
的“高度”属性让我们看起来更漂亮:
.supplier_top_link li ul li a {
...
/* height: 28px; <-- Remove this */
...
另请参阅此 live example .
关于html - 我无法让我的下拉菜单在两行中显示 <a>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17048707/
我是一名优秀的程序员,十分优秀!