0

2 番目のリンクを次の行にラップせずに、li タグ内に 2 つのハイパーリンクを配置したい Web メール スクリプトを変更/更新しようとしています。<li>また、yahoo メールのように、全体をクリックできるようにしたいと考えています。ここで検索してグーグルで検索しましたが、機能するものが見つかりません。

これは機能していないものです:

<div class="vertical">
<ul>
<li><a href="#">Folders</a></li>
<li><a href="#">Inbox</a></li>
<li><a href="#">Drafts</a></li>
<li><a href="#">Sent</a></li><br/>
<li><a href="#">Trash </a><a href="#">[empty]</a></li>
</ul>
</div>

これは、私がこれを機能させることができないcssを含む、これまでのコードです。

http://jsfiddle.net/z4gQC/33/

助けてくれてありがとう。

4

4 に答える 4

1

ここで実際の例を参照してください: http://jsfiddle.net/pratik136/z4gQC/26/

CSS を次のように変更します。

div.vertical
{
    width:100%;
    height:80px;
}
div.vertical ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
div.vertical li
{
    float:left;
    width:200px;   
    background-color:#f3f3f3;
}
div.vertical a
{
    display: inline-block; 
    width:50px;   
}
div.vertical a:link,div.vertical a:visited
{
    font-weight:bold;
    color:#666666;
    text-align:left;
    padding:8px;
    text-decoration:none;
}
div.vertical li:hover,div.vertical a:active
{
    background-color:#d4d4d4;
}
span 
{
    display: table-cell;
    vertical-align: middle;
}​

編集：

OP は、[空] を右揃えにするように要求しました。

フィドル: http://jsfiddle.net/pratik136/z4gQC/35/

<a href="#">[empty]</a>asにクラスを追加する

<a href="#" class="right">[empty]</a>

そして、CSS に以下を追加します。

div.vertical a.right:link, div.vertical a.right:visited{
    text-align: right;
}

</p>

于 2012-08-23T11:30:01.217 に答える
1

リンクをフローティングにする:

div.vertical a {
  float: left;
}

そして、liタグではなくaタグでホバー効果を作ります:

div.vertical li {
  background-color:#f3f3f3;
}

div.vertical li:hover {
  background-color:#d4d4d4;
}

デモ: http://jsfiddle.net/z4gQC/31/

于 2012-08-23T11:32:51.187 に答える
0

CSSをこれに変更してみてください

フィドルをチェック

 div.vertical
{
    width:100%;
    height:80px;
}
div.vertical ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
div.vertical li
{
    float:left;
    width:200px;   
    background-color:#f3f3f3;
}
div.vertical a
{
    display: inline-block; 
    width:50px;
float:right    
}

div.vertical a:first-child{ float:left}

div.vertical a:link,div.vertical a:visited
{
    font-weight:bold;
    color:#666666;
    text-align:left;
    padding:8px;
    text-decoration:none;
}
div.vertical li:hover,div.vertical a:active
{
    background-color:#d4d4d4;
}
span 
{
    display: table-cell;
    vertical-align: middle;
}​
于 2012-08-23T11:31:16.170 に答える
-2

CSS を次のように修正するだけです。

div.vertical a
{
    display:inline-block; 
}

それ以外の ：

div.vertical a
{
display:block; 
}

http://jsfiddle.net/z4gQC/18/

于 2012-08-23T11:27:15.403 に答える