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>的宽度从给定位置到行尾（树区域具有指定的宽度，但是如果路径可以滚动它或文件名比树区域的宽度长。好吧，直到现在还可以。

但是现在我必须稍微修改一下并删除＆＃34;删除＆＃34;行尾的选项。有了它，<a>应该在＆＃34;删除＆＃34;之前结束，所以

display:block;

可能不再正确。我试过了

display: inline-block;

然后，<a>区域以文件名末尾结束 - 我仍然需要它直到＆＃34;删除＆＃34;，它应该在行尾。

新结构应该是这样的：

<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，这样当您将鼠标悬停在它上方时，整个宽度都是可点击的，但您需要第二个{{1}标签在同一行上向右浮动。

我相信this demo会完成你想要的。我改变了锚链接的顺序，使其尽可能简单。还添加了背景颜色，以便您可以看到正在发生的事情。

<a>

所需的CSS将是：

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

如果改变锚点的顺序是不可能的，我可以用一些更复杂的CSS来解决，但随着CSS的复杂性增加，你在一个浏览器或另一个浏览器中破解的可能性也会增加。

编辑：根据您的回复，我创建了一些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; }上设置宽度，但从最初的问题来看，听起来你无论如何都要这样做。你可以看到updated JSFiddle here，这里是更新的CSS：

<ul>

Original Fiddle | Fiddle with long links

Answer 2

将锚标记更改为内联块，然后将第二个标记浮动到右侧

ul.tree a {
  display: inline-block;
}

ul.tree li a:last:child {
    float: right;
}

JSfiddle Demo

Answer 3

你考虑过使用jQuery Javascript吗？

您可以使用append()功能将<a>标记专门添加到需要它们的位置。

http://www.w3schools.com/jquery/html_append.asp

Answer 4

将一些float和overflow添加到css：

ul.tree li {
    ...
    clear: both;
    overflow: auto;
}
.delete {
    float: right;
}
.tree li a:first-child {
    float: left;
}

http://jsfiddle.net/9rxeu/

如何放<a> at the end of <li> line</li></a>

4 个答案: