CODEWITHSUNDEEP
htmlcsshtml-listsborder
Dennis G
Dennis G

Reputation: 21788

List items with borders spanning across the full width

The following JSFiddle shows my problem: http://jsfiddle.net/WREV3/

It looks pretty clean: enter image description here

My question: How do I get the border between the list items to span across the bullets?

I want colored bullets and hence used the :before trick. With that I had to add some negative margin-left and of course the bullets fall out of the "frame". But how do I get to have a border like so:

  * Item here spanning
    multiple lines   >
-----------------------
  * Another Item     >
-----------------------
  * Wow. More!       >
-----------------------

Mind the indentation of the second line of the first item: Same indent than the first line.

HTML Markup:

<ul>
    <li class="new">
    <span>Item 1 asd samdioa smodmasiom doasdmi oasi mdioas
        <div>&raquo;</div>
    </span>
    <div>2014-03-22, 14:20:21</div>
    </li>
    <li class="new">
    <span>Item 2 asd asd asdas
        <div>&raquo;</div>
    </span>
    <div>2014-03-20, 11:20:03</div>
    </li>
    <li>
    <span>
    Item 3 asd asd asdas sduiosmn diomsio d
        <div>&raquo;</div></span>
    <div>2014-03-19, 04:01:35</div>
    </li>
    <li>
    <span>
    Item 4 asd asdasd
        <div>&raquo;</div>
    </span>
    <div>2014-03-15, 09:20:05</div>
    </li>
</ul>

CSS:

ul {
    list-style: none;
    font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
    font-size: 13px;
    width: 200px;
}
ul li.new:before {
    color: #f00;
    content: "•";
    padding-right: 0;
    position: relative;
    left: -3px;
    margin-left: -12px;
}
ul li {
    padding: 5px 9px 5px 0;
    border-bottom: 1px solid gray;
}
ul li span {
    font-weight: bold;
}
ul li span div {
    float: right;
    font-weight: normal;
}
ul li span + div {
    padding-top: 2px;
    font-size: 9px;
}

Upvotes: 3

Views: 2041

Answers (5)

ryeballar
ryeballar

Reputation: 30088

You can change your <li> css definition from

ul li {
    padding: 5px 9px 5px 0;
    border-bottom: 1px solid gray;
}

to

ul li {
    padding: 5px 9px 5px 0;
    position: relative;
}

ul li:after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    border: 1px solid gray;
    width: 220px;
    margin-left: -20px;
}

without ever changing the structure of your HTML code.

Upvotes: 0

Ssss Ppppp
Ssss Ppppp

Reputation: 4404

Here you have. Working and valid.

http://jsfiddle.net/2emwP/

HTML:

<ul>
    <li class="new">
    <span>Item 1 asd samdioa smodmasiom doasdmi oasi mdioas
        <div>&raquo;</div>
    </span>
    <div>2014-03-22, 14:20:21</div>
    </li>
    <li class="border"></li>

</ul>

CSS:

ul {
    list-style: none;
    font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
    font-size: 13px;
    width: 200px;
}
ul li.new:before {
    color: #f00;
    content: "•";
    padding-right: 0;
    position: relative;
    left: -3px;
    margin-left: -12px;
}
ul li {
    padding: 5px 9px 5px 0;
    border: 0;

}
ul li.border{
    border-bottom: 1px solid gray;
    padding: 0;
    margin: 0;
    width: 212px;
    margin-left: -12px;
}
ul li span {
    font-weight: bold;
}
ul li span div {
    float: right;
    font-weight: normal;
}
ul li span + div {
    padding-top: 2px;
    font-size: 9px;
}

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105863

use absolute position for :before, negative margin-left and add a padding-left to li to save room for the generated bullet. http://jsfiddle.net/WREV3/8/

Upvotes: 2

Manly
Manly

Reputation: 379

You could try this:

HTML

<ul>
  <li class="new">
    <span>Item 1 asd samdioa smodmasiom doasdmi oasi mdioas
      <div>&raquo;</div>
    </span>
    <div>2014-03-22, 14:20:21</div>
  </li>
  <hr />
  <li class="new">
    <span>Item 2 asd asd asdas
      <div>&raquo;</div>
    </span>
    <div>2014-03-20, 11:20:03</div>
  </li>
  <hr />
  <li>
    <span>
      Item 3 asd asd asdas sduiosmn diomsio d
    <div>&raquo;</div></span>
    <div>2014-03-19, 04:01:35</div>
  </li>
  <hr />
  <li>
    <span>
      Item 4 asd asdasd
      <div>&raquo;</div>
    </span>
    <div>2014-03-15, 09:20:05</div>
  </li>
  <hr />
</ul>

CSS

ul {
  list-style: none;
  font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
  font-size: 13px;
  width: 200px;
}
ul li.new:before {
  color: #f00;
  content: "•";
  padding-right: 0;
  position: relative;
  left: -3px;
  margin-left: -12px;
}
ul li {
  padding: 5px 9px 5px 0;
}
ul li span {
  font-weight: bold;
}
ul li span div {
  float: right;
  font-weight: normal;
}
  ul li span + div {
  padding-top: 2px;
  font-size: 9px;
}
hr{
  margin-left:-1.5em;
  border:none;
  height:1px;
  background:#000;
}

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114990

You can use list-style-position:inside to move standard bullets if you wish but you may have to chaage some of your other CSS to affect other elements

JSfiddle

CSS

ul {
    font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
    font-size: 13px;
    width: 200px;
    list-style-position: inside; /* here :not 'list-style:none` has been removed */ 

}

ul li {
    border-bottom: 1px solid gray;


}
ul li span {
    font-weight: bold;
}
ul li span div {
    float: right;
    font-weight: normal;
}
ul li span + div {
    padding-top: 2px;
    font-size: 9px;
}

Upvotes: 0

Related Questions