html - 如何将 放在 行的末尾

Question

我正在尝试做一些类似文件树的事情。结构是这样的:

<ul class="tree">
  <li class="directory">
    <a href="">dir1</a>
    <ul>
      <li class="file"><a href="">file1</a></li>
      <li class="file"><a href="">file2</a></li>
    </ul>
  </li>
  <li class="file"><a href="">file3</a></li>
  <li class="file"><a href="">file4</a></li>
</ul>

我还使用了一些 CSS:

ul.tree li {
  list-style: none;
  padding: 0px;
  padding-left: 20px;
  margin: 0px;
  white-space: nowrap;
}
ul.tree a {
  color: #111;
  text-decoration: none;
  display: block;
  padding: 0px 2px;
}
.tree li.directory { 
  background: url(/images/directory.png) left top no-repeat; 
}
.tree li.file { 
  background: url(/images/file.png) left top no-repeat; 
}

它给了我很好的效果 - 我需要在每个内部目录中挖掘更多的树，并且 <a>从给定位置到行尾的宽度(树区域具有指定的宽度，但如果路径或文件名比树区域的宽度长，则可以滚动)。好吧，到现在为止还可以。

但现在我必须稍微改变一下，并在行尾添加一个“删除”选项。有了它，<a>应该在“删除”之前结束，所以

display:block;

可能不再正确。我试过了

display: inline-block;

然后，<a>区域以文件名结尾 - 我仍然需要它直到“删除”，它应该在行尾。

新的结构应该是这样的:

<ul class="tree">
  <li class="directory">
    <a href="">dir1</a><a href="" class="delete">Delete</a>
    <ul>
      <li class="file"><a href="">file1</a><a href="" class="delete">Delete</a></li>
      <li class="file"><a href="">file2</a><a href="" class="delete">Delete</a></li>
    </ul>
  </li>
  <li class="file"><a href="">file3</a><a href="" class="delete">Delete</a></li>
  <li class="file"><a href="">file4</a><a href="" class="delete">Delete</a></li>
</ul>

我不知道应该使用什么样式或其他什么来按照我想要的方式来做。那么，你能帮帮我吗？

Answer 1

我必须多次阅读您的帖子才能找到您要找的东西。如果我没看错的话，你想要的是第一个 <a>标签充当 display:block这样当你将鼠标悬停在它上面时，整个宽度都是可点击的，但你想要第二个 <a>标记在同一行上向右浮动。

我相信this demo会实现你的愿望。我更改了 anchor 链接的顺序以使其尽可能简单。还添加了背景颜色，以便您可以看到发生了什么。

<li class="file"><a href="" class="delete">Delete</a><a href="">Long Link Name</a>

所需的 CSS 是:

ul.tree li {
    list-style: none;
    padding: 0px;
    padding-left: 20px;
    margin: 0px;
    white-space: nowrap;
}
ul.tree a {
    color: #111;
    text-decoration: none;
    display: block;
    padding: 0px 2px;
    background-color: gold; //so you can see what's happening
}
ul.tree .delete {
    background-color: lightgreen; //so you can see what's happening
    margin: 0 0 0 5px;
    display: inline;
    float: right;
}
ul.tree a:hover {
    background-color: lightblue; //so you can see what's happening
}
.tree li.directory {
    background: url(/images/directory.png) left top no-repeat;
}
.tree li.file {
    background: url(/images/file.png) left top no-repeat;
}

如果改变 anchor 的顺序是不可能的，我可以使用一些更复杂的 CSS，但是随着 CSS 的复杂性增加，它在一个浏览器或另一个浏览器中出现故障的可能性也会增加。

---

编辑:根据您的回复，我创建了一些 CSS 以在链接文本太长时添加省略号 (…)。它需要在 main <ul> 上设置宽度，但从您最初的问题来看，您似乎仍在这样做。你可以看到 updated JSFiddle here ，这是更新后的 CSS:

ul {
    width: 333px;
}
ul ul {
    width: inherit;
}
a {
    overflow: hidden;
    text-overflow: ellipsis;
}
ul.tree li {
    list-style: none;
    padding: 0px;
    padding-left: 20px;
    margin: 0px;
    white-space: nowrap;
}
ul.tree a {
    color: #111;
    text-decoration: none;
    display: block;
    padding: 0px 2px;
    background-color: gold; //so you can see what's happening
}
ul.tree .delete {
    background-color: lightgreen; //so you can see what's happening
    margin: 0 0 0 5px;
    display: inline;
    float: right;
}
ul.tree a:hover {
    background-color: lightblue; //so you can see what's happening
}
.tree li.directory {
    background: url(/images/directory.png) left top no-repeat;
}
.tree li.file {
    background: url(/images/file.png) left top no-repeat;
}

Original Fiddle | Fiddle with long links