Simoroshka Simoroshka - 9 days ago 6
CSS Question

Display a ul list bullet on the side of a div

I have a list of divs with paragraphs inside each element. I would like to treat it as an unordered list and display a custom bullet on the left side of each div. However, I get the bullet on top of the divs.

The fiddle shows my problem and what I would like to see.

If this is not possible to achieve with this html structure, I would be glad to hear some other suggestions.

Answer

You could do this with absolute positioning, but I generally prefer to avoid positioning that if at all possible.

Ultimately, I just set the div to indent the same as the straight li tag, and then floated the +.

ul {
  width: 300px;
  list-style: none;
}

li {
  margin: 40px;
  padding-left: 0px;
}

li > div { margin-left: 40px;}

li:before {
  content: "+";
  display: block;
  float: left;
  padding-right: 30px;
}
  <ul>
    <li>
      <div>
        <p>This is out of place</p>
        <span>some other thing that wants to be here</span>
      </div>
    </li>
    <li>This works as intended</li>
  </ul>

Comments