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

アンカー タグをブロック タイプの要素として表示する必要があります。そうしないと、 width プロパティが使用されません。

追加してみてください：

display:block;

また

display:inline-block;

あなたのul li aセレクターに。

ここでは、説明のためにjsfiddleに更新を追加します。

于 2013-05-14T16:01:11.110 に答える
1

a特にサイズを指定しようとすると、タグの動作が少し悪くなることがあります。

display: inline-block回避策は、a-tagを指定することです。(ただし、スタイルの残りの部分が台無しになります。) jsFiddleを参照してください。

<li>:s のwidth プロパティを変更することをお勧めします。

于 2013-05-14T16:04:43.260 に答える
0

インライン要素の幅を変更しようとしていますa。これを行うには、それに追加する必要がありますdisplay: inline-block;。

于 2013-05-14T15:59:42.703 に答える
0

aインライン要素です。幅を直接設定することはできません。追加display:inline-blockすると動作するはずです。

于 2013-05-14T15:59:51.853 に答える
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 に答える