Part of list item's text aligned left and rest aligned right

Question

I would like to have part of <li> content aligned to the left ("Title") and rest of it ("[button]") to the right. For each item.

I'm using following HTML code:

<ul class="dual-align-list">

    <li><div>Title</div><div>[button]</div></li>

    <li><div>Title</div><div>[button]</div></li>

</ul>

and styles:

ul.dual-align-list li
{
    display: block;
    height: 25px;
}

ul.dual-align-list li div:first-child {float: left}

ul.dual-align-list li div:nth-child(2) {float: right}

But I have a bad feeling, that I'm doing something really wrong.

Is there a better approach/solution to this problem?

Answer 1

But I have a bad feeling, that I'm doing something really wrong. Is there a better approach/solution to this problem?

The only problem is your classes and use of pseudo-elements aren't very semantic. A better approach would be to give classes to your divs that describe what their content is, and style them that way.

<ul class="title-content-list">
    <li><div class="title">Title</div><div class="content">[button]</div></li>
</ul>

And CSS

ul.title-content-list > li { display: block; height: 25px; }
ul.title-content-list > li > div.title { float: left }
ul.title-content-list > li > div.content { float: right }

Or something along those lines.

It's very bad practice to use "left" or "right" as class names - what if you later decide you want your title on the right and button on the left? You'd have to change all your HTML, or have weird CSS where .right positions elements on the left and .left on the right.

Answer 2

What you are doing seems to be working (at least per how you describe what you are looking for here). I'm assuming that your issue is the complexity of your selectors? If so, one thing you could try is moving the selector to the individual element. I know for bootstrap they call this pull-right so I went ahead and did that:

<ul class="dual-align-list">
    <!-- Title really only needs to be in a div if you
         plan on styling it further -->
    <li> Title <div class="pull-right">[button]</div></li>
    <li> Title <div class="pull-right">[button]</div></li>
</ul>

See this JSFiddle for a working example with that in it. Hopefully this addresses the actual question!

Edit

By the way, if the issue is just how far the button goes to the right you can put everything in a fixed width container or you can add a margin-right to the "pull-right" class. For the fixed width container, just wrap your ul in:

<div class="container"> <!-- "ul" here --> </div>

You will also need the following style rule as well:

/* edited to use percents for a responsive layout */
.container { margin-left: 5%; margin-right: 5% }

I put this in an update to the previous fiddle you can find here. Hopefully that helps some as well. Good luck!

EDIT (2)

Changed fixed width layout to responsive layout with 5% margins. These could be adjusted per the desired result or even styled with the @media element to vary based on screen size!

Answer 3

Try this:

HTML

<ul class="dual-align-list">
    <li>
        <div class="left">Title</div>
        <div class="right">[button]</div>
    </li>
    <li>
        <div class="left">Title</div>
        <div class="right">[button]</div>
    </li>
</ul>

CSS

ul.dual-align-list li {
    display: block;
    height: 25px;
    position: relative;
}
ul.dual-align-list li .left {
    text-align: left;
    position: absolute;
    left:0;
}
ul.dual-align-list li .right {
    text-align: right;
    position: absolute;
    right:0;
}

Hopefully this helps :)