0

私が作成している私のウェブサイトには、次のコードがあります。

.menu{      
}

.menu a{
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    color: #d7d7d7;
    font: bold 16px Arial,Helvetica,Sans-serif;
    text-decoration: none;
    border-radius: 10px;
    background-color: #444;
    padding: 5px 10px;
    text-align: center;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.menu a:hover{
    border: double 6px #00F;
    color: #00F;
    background-color: #FFF;
    font: bold 20px Arial,Helvetica,Sans-serif;
    text-decoration: underline;
    text-align: center;
}

.sidebar{
    width:220px;
    margin-top:8px;
    margin-left:3px;
    background-color:#CCC;
    border-radius:10px;
    padding:10px;
    clear:left;
    -moz-box-shadow: inset 0 0 5px 5px #888;
    -webkit-box-shadow: inset 0 0 5px 5px #888;
    box-shadow: inset 0 0 5px 5px #888;
}

.sidebar p{
    text-align: center;
}

HTML コード:

<div class="sidebar">
    <b style="color:#666;">Menu</b>
    <div class="menu">
        <p><a href="#">Profile</a></p>
        <p><a href="#">Friends</a></p>
        <p><a href="#">Community Service</a></p>
        <p><a href="#">Messages</a></p>
    </div>
</div>

何らかの理由で、このようにアンカーを重ねて配置できる唯一の方法は、アンカーを段落タグに配置することですが、それは望ましくありません。以下は、すべてのコードがどのように見えるかを示した図です。

コードの概要

メニューを [ログインしてアカウントを作成] ボタンのようにしたいのですが、CSS に違いはありません。それらを区別できる唯一のことは、それらを含む div がテーブルに配置されていることです。それで、私はどうすれば同じ幅と高さを上と下のdivのように達成できるのだろうと思っていました。また、それをテーブルに入れてみましたが、それを一緒に押しつぶして丸いエッジを取り出しました（.menuのCSS display: table およびdisplay: table-cell アンカーも、押しつぶされるため機能しません）。これが私のコードの残りの部分です: http://pastebin.com/ZLS94ZvQご協力ありがとうございます!

4

2 に答える 2

3

HTML を次のように変更する必要があります。

<div class="sidebar">
  <b style="color:#666;">Menu</b>
  <ul class="menu">
    <li><a href="#">Profile</a></li>
    <li><a href="#">Friends</a></li>
    <li><a href="#">Community Service</a></li>
    <li><a href="#">Messages</a></li>
  </ul>
</div>

そしてあなたのCSSは：

.menu{      
  list-style:none; /* remove style from <ul> but leave a 40px margin on the left */
  margin-left:-40px; /* this remove the 40px margin on the left */
}
.menu li{
  text-align: center;
  margin: 10px 0; /* this adds 10px top and bottom of each <LI> element */
}
.menu a{
    display: block;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    color:  #d7d7d7; 
    font: bold 16px Arial,Helvetica,Sans-serif;
    text-decoration: none;
    border-radius: 10px;
    background-color: #444;
    padding: 5px 10px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.menu a:hover{
    border: double 6px #00F;
    color: #00F;
    background-color:  #FFF; 
    font: bold 20px Arial,Helvetica,Sans-serif;
    text-decoration: underline;
    text-align: center;
}

.sidebar{
    width:220px;
    margin-top:8px;
    margin-left:3px;
    background-color:#CCC;
    border-radius:10px;
    padding:10px;
    clear:left;
    -moz-box-shadow: inset 0 0 5px 5px #888;
    -webkit-box-shadow: inset 0 0 5px 5px #888;
    box-shadow: inset 0 0 5px 5px #888;
}

を使用する<ul>方が適切で、意味的に正しいです。<ul>検索エンジンの場合は、でラップする方がさらに良いはずです<nav>

于 2013-01-18T03:21:09.810 に答える
2

使用を検討する必要があります

<ul>
<li>Your link here</li>
<li>Your link here</li>
<li>Your link here</li>
<li>Your link here</li>
</ul>

リンクを一覧表示します。これが最も一般的な方法です。

次に、liタグをdisplay: block;に設定し、 aを設定widthしてリンクを引き延ばすだけで、リンクがすべて均等になります。

于 2013-01-18T02:57:48.163 に答える