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

Question

我正在尝试修改/更新一个网络邮件脚本，我希望在一个 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>as

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

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

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

​</p>

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改成这个

检查小提琴

 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/