Question

我以前做过这个，我不明白为什么它不起作用。我正在尝试这样做： 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/

宽度似乎不想改变。

我做错了什么？

Answer 1

您需要将锚标记显示为块类型元素otherwise it will not take the width property。

所以尝试添加：

display:block;

或

display:inline-block;

到ul li a选择器。

我在此向jsfiddle添加了更新以供说明。

Answer 2

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

解决方法是为display: inline-block - 标记指定a。（但它会破坏你的其余风格。）见jsFiddle

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

Answer 3

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

Answer 4

a是一个内联元素。您无法直接在其上设置宽度。添加display:inline-block，它应该有用。

Answer 5

在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;
}

Answer 6

<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;
    }

尝试使用css在悬停时更改宽度

6 个答案: