CODEWITHSUNDEEP
cssborder
Gene9y
Gene9y

Reputation: 859

border bottom to li with spans not working

I added a border-bottom style to li with spans inside but it's not working. 

<ul>
<li style="border-bottom: 1px solid #ccc">
<span class="col-xs-5">Test 1</span>
<span class="col-xs-7"> Test 2</span>
</li>
</ul>

It's rather straightforward, but it renders the border above the span (Test1, Test2). Am I getting this wrong?

Upvotes: 0

Views: 421

Answers (4)

Annalaxmi
Annalaxmi

Reputation: 133

Try this

<ul>
  <li style="border-bottom: 1px solid #ccc">
    <span class="col-xs-5">Test 1</span>
  </li>
  <li style="border-bottom: 1px solid #ccc">
    <span class="col-xs-7"> Test 2</span>
  </li>
</ul>

Upvotes: 1

MrMadsen
MrMadsen

Reputation: 3012

Using bootstraps col-* puts a float on the element. Bootstrap is built to handle this by wrapping columns with the row class. Something like this:

<ul>
  <li class='row' style="border-bottom: 1px solid #ccc">
    <span class="col-xs-5">Test 1</span>
    <span class="col-xs-7"> Test 2</span>
  </li>
</ul>

Or you could put the row class on the ul, just depends on how you're using the li elements.

Upvotes: 0

Gowtham
Gowtham

Reputation: 1597

span{
border-bottom: 1px solid #ccc
}
<ul>
<li >
<span class="col-xs-5" >Test 1</span>
</li>
  <li >
<span class="col-xs-7"> Test 2</span>
</li>
</ul>

Upvotes: 0

Razia sultana
Razia sultana

Reputation: 2221

Try it:-

p {
        border-style: solid;
        border-bottom: thick dotted #ff0000;
    }

Upvotes: 0

Related Questions