CODEWITHSUNDEEP
htmlcss
Lidia B.
Lidia B.

Reputation: 125

How to put <a> at the end of <li> line

I'm trying to do something like file tree. The structure is like that:

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

I also used some 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; 
}

It gives me fine effect - I need tree more digged in with every inner directory, and <a> with width from given position to the end of line (tree area has specified width, but it can be scrolled if path or filename is longer then tree area's width). Well, it was ok until now.

But now I have to change it a little and put a "delete" option at the end of line. With it, <a> should end before "delete", so 

display:block;

is probably no longer correct. I tried 

display: inline-block;

but then, the <a> area ends with the end of file name - and I still need it until the "delete", which should be at the end of line.

The new structure should be like this:

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

I don't know what styles or what else should I use to do it the way, I want to. So, could you help me, please?

Upvotes: 3

Views: 1179

Answers (4)

dashard
dashard

Reputation: 897

I had to read your post multiple times to try to get what you were looking for. If I'm reading you correctly, what you want is the first <a> tag to act as a display:block so that when you hover over it the entire width is clickable, but you want the second <a> tag to float to the right on the same line.

I believe that this demo will accomplish what you wish. I changed the order of the anchor links to make it as easy as possible. Also added background colors so you could see what's going on.

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

The CSS required would be:

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

If changing the order of the anchors is out of the question, I could muck around with some more elaborate CSS, but as the complexity of the CSS increases, so do your chances of it breaking in one browser or the other.

EDIT: Based on your reply, I've created some CSS to add an ellipsis (…) when the link text is too long. It requires setting a width on the main <ul>, but from your initial question it sounds like you're doing that anyway. You can see the updated JSFiddle here, and here's the updated 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

Upvotes: 2

Pascal Schimkus
Pascal Schimkus

Reputation: 308

Adding some float and overflow to css:

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

http://jsfiddle.net/9rxeu/

Upvotes: 0

aphextwix
aphextwix

Reputation: 1858

Have you considered using jQuery Javascript ?

You could use the append() function to add the <a> tags specifically where you need them to appear.

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

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115278

Change the anchor tags to inline block and then float the second one to the right

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

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

JSfiddle Demo

Upvotes: 1

Related Questions