CODEWITHSUNDEEP
htmlcsslayouthtml-lists
p44v9n
p44v9n

Reputation: 97

Aligning li text that wraps when using custom bullet point

I've got a minor problem and was wondering if anyone could come up with a quickfix?

The problem

I've got a ul of lis which uses custom bullet points using li:before { content: etc. I'm trying to get the words to align properly - you can see on the fourth li item, when the words wrap to the next line they don't start under the word but under the bullet.

enter image description here

Attempted fixes

Example

Click here to see a demo of the problem: http://jsfiddle.net/MS9Z9/

(below code is abbreviated)

.panel-body ul li {
    list-style-type:none;
}
.panel-body ul li:before {
    content:"\27A8\00a0\00a0";
}

Solutions would be great but even ideas are appreciated, thank you!

Upvotes: 8

Views: 3006

Answers (2)

Huangism
Huangism

Reputation: 16438

You can do 

body .sidebar {
  background-color: #ccc;
  padding: 20px;
  width: 330px;
  float: right;
}

.panel-head {
  background-color: #53d;
  color: #fff;
  padding: .3em;
  text-align: center;
  font-family: @fancyfont;
  font-size: 1.2em;
}

.panel-body {
  color: #aaa;
  background-color: #fff;
}

.panel-body ul {
  display: inline;
  padding: 0;
}

.panel-body ul li {
  padding: 0.5em 0.5em 0.5em 1.5em;
  border-bottom-style: solid;
  border-color: #ccc;
  list-style-type: none;
  margin: 0;
  position: relative;
}

.panel-body ul li:last-child {
  border-bottom-style: none;
}

.panel-body ul li a {
  text-decoration: none;
}

.panel-body ul li a:visited {
  color: #000;
}

.panel-body ul li:before {
  content: "\27A8\00a0\00a0";
  position: absolute;
  left: 7px;
}

.panel-body ul li:hover,
.panel-body ul li:hover a {
  background-color: #53d;
  color: #fff;
}
<div class="sidebar">
  <div class="panel">
    <div class="panel-head">
      <p>Your Menu</p>
    </div>
    <div class="panel-body">
      <ul>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor sit amet draco dormiens numquam titallandus</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
      </ul>
    </div>
  </div>

Position the before content absolute, make your li relatively positioned and you can freely adjust the custom bullet

Another alternative is just to float the before content left 

body .sidebar {
  background-color: #ccc;
  padding: 20px;
  width: 330px;
  float: right;
}

.panel-head {
  background-color: #53d;
  color: #fff;
  padding: .3em;
  text-align: center;
  font-family: @fancyfont;
  font-size: 1.2em;
}

.panel-body {
  color: #aaa;
  background-color: #fff;
}

.panel-body ul {
  display: inline;
  padding: 0;
}

.panel-body ul li {
  padding: 0.5em;
  border-bottom-style: solid;
  border-color: #ccc;
  list-style-type: none;
  margin: 0;
}

.panel-body ul li:last-child {
  border-bottom-style: none;
}

.panel-body ul li a {
  text-decoration: none;
}

.panel-body ul li a:visited {
  color: #000;
}

.panel-body ul li:before {
  content: "\27A8\00a0\00a0";
  float: left;
}

.panel-body ul li:hover,
.panel-body ul li:hover a {
  background-color: #53d;
  color: #fff;
}
<body>
  <div class="sidebar">
    <div class="panel">
      <div class="panel-head">
        <p>Your Menu</p>
      </div>
      <div class="panel-body">
        <ul>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor sit amet draco dormiens numquam titallandus</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
        </ul>
      </div>
    </div>
</body>

Upvotes: 6

BeardedMan
BeardedMan

Reputation: 394

you could also use display: table property on the a tag, see

JSFiddle

Upvotes: 1

Related Questions