CODEWITHSUNDEEP
csshtml-lists
Texan78
Texan78

Reputation: 687

Horizontal unordered list

I struggle with unordered list. Is there a way to make them horizontal? Please see the jsFiddle. The red boxes are suppose to be in front of each text and spaced accordingly. What am I missing, which I am sure a lot.

http://jsfiddle.net/5Lmymdwh/

#alertLegend li {
    display: inline;
    font-size:10px;
    height:15px;
    left:10px;
    list-style-type:none;
    margin:.5em .5em 0em -3.4em;
    position:relative;
    text-align:left;
}

.legendDiv {
    background-color:#8B0000;
    border:solid 1px #333;
    float:left;
    margin-right:2px;
    width:15px;
}

.legendTxt {
    font-size:12px;
    color:#555;
    padding-left:25px;
}



<ul id='alertLegend'>
     <li><div class='legendDiv'>&nbsp;</div><span class='legendTxt'> Demo 1</span></li>
     <li><div class='legendDiv'>&nbsp;</div><span class='legendTxt'> Demo 2</span></li>
     <li><div class='legendDiv'>&nbsp;</div><span class='legendTxt'> Demo 3</span></li>
</ul>

-Thanks

Upvotes: 2

Views: 2185

Answers (5)

Tyler Lazenby
Tyler Lazenby

Reputation: 451

When I looked at the JS fiddle, I noticed that the text wasn't in the div's at all. I have since moved them, and altered the text color to be more legible inside the div's. Also if you want to format the text inside a div, you can make the edits there instead of a span class like you had (has been removed, albeit altered but to show simplicity).

#alertLegend li {
    display: inline;
    font-size:10px;
    height:15px;
    left:10px;
    list-style-type:none;
    margin:.5em .5em 0em -3.4em;
    position:relative;
    text-align:left;
}
.legendDiv {
    background-color:#8B0000;
    border:solid 1px #333;
    float:left;
    margin-right:2px;
    width:30px;
    color: white;
}
<ul id='alertLegend'>
    <li>
        <div class='legendDiv'>Demo1</div>
    </li>
    <li>
        <div class='legendDiv'>Demo2</div>
    </li>
    <li>
        <div class='legendDiv'>Demo3</div>
    </li>
</ul>

Upvotes: 1

PavKR
PavKR

Reputation: 1621

Not too sure what you're exactly trying to achieve but you can simplify your HTML/CSS a lot further by using border-left or background.

See here: http://jsfiddle.net/pavkr/yrxbLvkf/2/

Upvotes: 1

Weafs.py
Weafs.py

Reputation: 22998

Instead of using extra div for that custom bullet you could use :before : pseudo-element.

#alertLegend li {
  display: inline-block;
  font-size: 10px;
  height: 15px;
  font-size: 12px;
  color: #555;
  list-style-type: none;
}
#alertLegend li:not(:last-child) {
  margin-right: 10px;
}
#alertLegend li:before {
  content: '';
  border: solid 1px #333;
  background-color: #8B0000;
  float: left;
  height: 12px;
  width: 15px;
}
<ul id='alertLegend'>
  <li>Demo 1</li>
  <li>Demo 2</li>
  <li>Demo 3</li>
</ul>

Upvotes: 2

LOTUSMS
LOTUSMS

Reputation: 10290

I updated your JSFiddler HERE

You basically had a combination of mistakes. The code is simpler that you started with. The biggest problem you had was to give your red box a float:left This automaticaly pushes the element to the absolute left. The other problem you had was to create the divs inside. Your list item doesn't need a span tag. It is already wrapped by the <li> tags. The square however does need span tags to align it vertically and style it differently without affecting the rest of the <li> content.

Upvotes: 2

Iłya Bursov
Iłya Bursov

Reputation: 24229

Here is working css:

#alertLegend li {
    display: inline-block;
    list-style-type:none;
    height:15px;
}

.legendDiv {
    background-color:#8B0000;
    border:solid 1px #333;
    float:left;
    margin-right:2px;
    width:15px;
    height: 15px;
}

.legendTxt {
    font-size:12px;
    color:#555;
}

Upvotes: 1

Related Questions