Question

我正在尝试修改/更新webmail脚本，我希望在li标签内部有两个超链接，而第二个链接不包含在下一行。我也希望整个<li>可以点击，类似于雅虎邮件。我在这里搜索并用谷歌搜索，但找不到任何有用的东西。

这不起作用：

<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/

提前感谢您的帮助。

Answer 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请求[empty]对齐。

小提琴：http://jsfiddle.net/pratik136/z4gQC/35/

将一个类添加到<a href="#">[empty]</a>

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

并将以下内容添加到CSS中：

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

Answer 2

让链接浮动：

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/

Answer 3

尝试将此css改为此

检查fiddle

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

Answer 4

只需将您的CSS更正为：

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

而不是：

div.vertical a
{
display:block; 
}

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

同一个li标签中的两个超链接

4 个答案: