CODEWITHSUNDEEP
csspositionhtml-listsanchor
inhan
inhan

Reputation: 7470

CSS: <li> items having 3 inline-block elements, last occupying max space

In each list item in an unordered list I have 2 inline-block elements and an anchor text, all next to each other. So in each <li> there are 2 icons and a text.

The reason I made those 2 icons display:inline-block is because they have different heights and the anchor text next to them can occasionally become multiple lines, and I'm able to center them to the first line by the vertical-align rule.

Anyway this anchor tag has a :hover style, which is basically background-color:gray. For some reason I couldn't succeed in blocking this anchor element by any generic solution.

What I did sort of works but I can't rely on this solution because I'm using hard-coded with for the <ul> and <a> widths and when the list needs scrollbars these widths need to be subtracted the bar width. Below is my current solution, if that sheds a light to someone.

I tried giving the anchor text a margin-left and set it to display:absolut, to no avail. I also tried giving percentages but again… Ultimately I tried floating the elements but it's probably the wrongest solution here because of the multiline possibility of the text and centering each element in vertical center of the first line of the text. My next guess is using a table in each list item but that's probably the dirtiest solution available, and I don't want to use that unless I have to.

How would you do it? Let me know if you need further details.

CSS

ul {
    overflow:auto;
    height:6em;
    width:320px;
}
li .icon1 {
    display:inline-block;
    width:13px;
    height:12px;
    vertical-align:top;
    background:url(image.jpg) left top no-repeat;
}
li .icon2 {
    display:inline-block;
    width:9px;
    height:10px;
    margin-right:2px;
    background:url(image.jpg) left -12px no-repeat;
}
li a {
    display:inline-block;
    padding-left:4px;
    vertical-align:top;
    width:270px;
}
li a:hover {
    background-color:lightgray;
}

HTML

<ul>
    <li>
        <div class="icon1"></div>
        <div class="icon2"></div>
        <a href="#">Some anchor text</a>
    </li>
    <!-- many other li items in here -->
</ul>

Here's an image to illustrate what I'm trying to achieve:

a pseudo image

Thanks in advance.

Upvotes: 1

Views: 1559

Answers (2)

inhan
inhan

Reputation: 7470

Okay I found out how to solve it. I'm pretty sure this is not the ideal solution but it seems to work without any problem (yet, in the browsers I tried).

If somebody has a better solution please let me know.

Here's the whole code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Another dirty (but better) solution</title>
<style type="text/css">
body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
ul {
    overflow:auto;
    width:18em;
    height:6em;
    list-style:none;
    margin:0;
    padding:0;
}
li {overflow:hidden;}
li .icons {
    float:left;
    margin:-0.1em 0;
}
li .icons .icon1 {
    display:inline-block;
    width:13px;
    height:12px;
    vertical-align:middle;
    background-color:red;
}
li .icons .icon2 {
    display:inline-block;
    width:9px;
    height:10px;
    vertical-align:middle;
    background-color:green;
    margin-bottom:1px; /* here's the dirty hack: (icon1.height-icon2.height) / 2 */
}
li a {
    color:inherit;
    text-decoration:none;
    display:block;
    padding:0 4px;
    margin-left:24px;
}
li a:hover {
    background-color:lightgray;
}
</style>
</head>
<body>
    <ul>
        <li>
            <div class="icons"><div class="icon1"></div><div class="icon2"></div></div>
            <a href="#">Some link text</a>
        </li>
        <li>
            <div class="icons"><div class="icon1"></div><div class="icon2"></div></div>
            <a href="#">Some other link text</a>
        </li>
        <li>
            <div class="icons"><div class="icon1"></div><div class="icon2"></div></div>
            <a href="#">A longer link text here</a>
        </li>
        <li>
            <div class="icons"><div class="icon1"></div><div class="icon2"></div></div>
            <a href="#">Shrt lnk txt</a>
        </li>
        <li>
            <div class="icons"><div class="icon1"></div><div class="icon2"></div></div>
            <a href="#">Much much looooonger text in here</a>
        </li>
        <li>
            <div class="icons"><div class="icon1"></div><div class="icon2"></div></div>
            <a href="#">Just another link text</a>
        </li>
    </ul>
</body>
</html>

Upvotes: 0

inControl
inControl

Reputation: 2344

The best two solutions I could think of where: 1) using the example below CSS:

ul {
    overflow:auto;
    height:6em;
    width:320px;
}
.icon1 {
    width:13px;
    height:12px;
    vertical-align:top;
    background:url(image.jpg) left top no-repeat;
    border: 1px solid black;
}
.icon2 {
    display:inline-block;
    width:9px;
    height:10px;
    margin-right:2px;
    background:url(image.jpg) left -12px no-repeat;
}
li a {
    display:block;
    padding-left:4px;
    vertical-align:top;
    border: 1px solid black;
}
li a:hover {
    background-color:lightgray;
}

HTML:

<ul>
    <li>
        <a href="#"><img class="icon1" src="image.jpg" alt="icon1"/><img class="icon2" src="image.jpg" alt="icon2"/>Some label in here!</a>
    </li>
    <li>
        <a href="#"><img class="icon1" src="image.jpg" alt="icon1"/><img class="icon2" src="image.jpg" alt="icon2"/>Some label in herdsafasdfasdfsad sadfasd sadfasd asdfsade!</a>
    </li>
</ul>

2) You could also add background images to the li items with: 

background-image: url(image.jpg);

for the icons

Upvotes: 2

Related Questions