1

我以前做过这个，我不明白为什么它不起作用。我正在尝试这样做：http: //jsfiddle.net/geometron/u3M6r/1/

<ul>
    <li><a href="content1.html"> Demo 1     </a></li>
    <li><a href="content2.html"> Demo 2     </a></li>
    <li><a href="content3.html"> Demo 3     </a></li>
    <li><a href="content4.html"> Demo 4     </a></li>
    <li><a href="content5.html"> Demo 5     </a></li>
    <li><a href="content6.html"> Demo 6     </a></li>
</ul>

但是有了 ul，我可以减少 CSS。这就是我得到的：http: //jsfiddle.net/geometron/6DUL9/

宽度似乎不想改变。

我究竟做错了什么？

4

6 回答 6

1

标记a有时会表现得有些糟糕，尤其是当您尝试指定大小时。

一种解决方法是display: inline-block为您的a-tag 指定。（但是它会弄乱你的其他风格。）见jsFiddle

更好的方法是更改<li>​​ :s 的 width 属性。

于 2013-05-14T16:04:43.260 回答
1

您需要将锚标记显示为块类型元素，否则它不会带宽度属性。

所以尝试添加：

display:block;

或者

display:inline-block;

到您的ul li a选择器。

在这里，我将更新添加到您的jsfiddle以进行说明。

于 2013-05-14T16:01:11.110 回答
0

在你的 HTML 中试试这个

  <li  class="item1"><a href="content1.html"> Demo 1     </a></li>
    <li><a href="content2.html"> Demo 2     </a></li>
    <li><a href="content3.html"> Demo 3     </a></li>
    <li><a href="content4.html"> Demo 4     </a></li>
    <li><a href="content5.html"> Demo 5     </a></li>
    <li><a href="content6.html"> Demo 6     </a></li>

在你的 CSS 中试试这个

.item1:hover
{
/*border-radius:100px;*/
height:25px;
left: 0px;
top: 130px;
width:250px;
background-color: #FFF;
}
于 2013-05-14T16:03:52.640 回答
0

您尝试更改内联元素的宽度a。为此，您需要添加display: inline-block;它。

于 2013-05-14T15:59:42.703 回答
0

a是一个内联元素。您不能直接在其上设置宽度。添加display:inline-block它应该可以工作。

于 2013-05-14T15:59:51.853 回答
0 
<ul class = "sample">
<li><a href="content1.html"> Demo 1     </a></li>
<li><a href="content2.html"> Demo 2     </a></li>
<li><a href="content3.html"> Demo 3     </a></li>
<li><a href="content4.html"> Demo 4     </a></li>
<li><a href="content5.html"> Demo 5     </a></li>
<li><a href="content6.html"> Demo 6     </a></li>

CSS 文件

.sample li a:hover {
    padding: 4px 10px;
    }
于 2017-09-06T07:19:46.653 回答