我正在尝试做类似文件树的操作。结构是这样的：
<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>
我不知道我想使用哪种样式或使用其他方式来做。所以，能帮我吗？
我不得不多次阅读您的文章以尝试获得您想要的东西。如果我正确地阅读了您的内容，那么您想要的是第一个<a>用作标签的标签，display:block以便当您将鼠标悬停在其上时，整个宽度都可以单击，但是您希望第二个<a>标签在同一行上向右浮动。
我相信这个演示将实现您的期望。我更改了锚链接的顺序，以使其尽可能简单。还添加了背景颜色，以便您可以看到发生了什么。
<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;
}
如果无法更改锚点的顺序，我可以考虑使用一些更精致的CSS，但是随着CSS复杂性的增加，您可能会在一个浏览器或另一个浏览器中破坏它。
编辑：根据您的答复，我创建了一些CSS，以在链接文本过长时添加省略号（...）。它需要在main上设置一个宽度<ul>，但是从您最初的问题开始，听起来好像您正在这样做。您可以在此处看到更新的JSFiddle，这是更新的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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句