Html 如何放置<；a>；在<；李>；线

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

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

它给了我很好的效果-我需要在每个内部目录中挖掘更多的树，并且

---

我不知道我应该用什么样的风格或者别的什么来做，我想。那么，你能帮我吗？

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

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

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

---

您考虑过使用jQuery Javascript吗

---

您可以使用

append（）

函数添加

向css添加一些
float
和
overflow
：

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

为了得到你想要的东西，我不得不多次阅读你的帖子。如果我读对了，你想要的是第一个
将实现你的愿望。我改变了锚链的顺序，使之尽可能容易。还添加了背景色，以便您可以看到发生了什么

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

如果改变锚点的顺序是不可能的，我可以尝试一些更复杂的CSS，但是随着CSS复杂性的增加，你在一个或另一个浏览器中崩溃的可能性也会增加


编辑：根据您的回复，我创建了一些CSS，以便在链接文本过长时添加省略号（…）。它需要在主
上设置一个宽度，但从您最初的问题来看，听起来您无论如何都在这样做。您可以看到，以下是更新的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;
}

|
谢谢你的回答，但这并不是我所希望的。嗯，视图是正确的，但是第一个
标记的区域以文件名结尾（介于
和
标记之间）。第一个和第二个
之间的区域是免费的，只属于父
。我需要它属于first
，即使在中没有这么长的文本，因为这个区域应该用于first
标记的事件。这更像吗？-否则，这应该是什么样子的图像将需要。是的，它更像这样，但有一个问题，我也有过。请注意，“删除”在正确的
行下方一行。一开始我没有注意到，但是你的第一个答案也有这个问题。谢谢，但问题和我第一次给Paulie_D.的评论一样。啊，好的，错过了。很抱歉，理解我的帖子时遇到了麻烦。我不习惯用英语写作，所以我仍然难以把我的想法用语言表达出来。我试着把它写得很详细，让人难以理解，可惜我写不懂。但你的回答是正确的，这正是我想要做的。不过，文件名太长还有一个问题，不过我会设法解决的。非常感谢。哦！我不是在批评你的英语！我希望我能说另一种语言，更不用说用它来表达关于代码的问题了！你做得很好！现在它完全按照我想做的做了。再次非常感谢你。
ul.tree a {
  display: inline-block;
}

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

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

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

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

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