Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Html Lists / Layout

Aligning Li Text That Wraps When Using Custom Bullet Point

Post a Comment
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.

Solution 1:

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-bodyul {
  display: inline;
  padding: 0;
}

.panel-bodyulli {
  padding: 0.5em0.5em0.5em1.5em;
  border-bottom-style: solid;
  border-color: #ccc;
  list-style-type: none;
  margin: 0;
  position: relative;
}

.panel-bodyulli:last-child {
  border-bottom-style: none;
}

.panel-bodyullia {
  text-decoration: none;
}

.panel-bodyullia:visited {
  color: #000;
}

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

.panel-bodyulli:hover,
.panel-bodyulli:hovera {
  background-color: #53d;
  color: #fff;
}
<divclass="sidebar"><divclass="panel"><divclass="panel-head"><p>Your Menu</p></div><divclass="panel-body"><ul><li><ahref="#">Lorem ipsum dolor</a></li><li><ahref="#">Lorem ipsum dolor</a></li><li><ahref="#">Lorem ipsum dolor</a></li><li><ahref="#">Lorem ipsum dolor</a></li><li><ahref="#">Lorem ipsum dolor</a></li><li><ahref="#">Lorem ipsum dolor</a></li><li><ahref="#">Lorem ipsum dolor sit amet draco dormiens numquam titallandus</a></li><li><ahref="#">Lorem ipsum dolor</a></li><li><ahref="#">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-bodyul {
  display: inline;
  padding: 0;
}

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

.panel-bodyulli:last-child {
  border-bottom-style: none;
}

.panel-bodyullia {
  text-decoration: none;
}

.panel-bodyullia:visited {
  color: #000;
}

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

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

Solution 2:

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

JSFiddle

Post a Comment for "Aligning Li Text That Wraps When Using Custom Bullet Point"