CSS Forum

**asmalik12** · 04:11 AM

Hi,

How can I use border-bottom under the full <li> rather than just the text [Some text here...] here?

Code:

<style type="text/css">
ul.latest {
	list-style-type: none;
        margin: 0px;
	padding: 0px 0px 5px 10px;
	}
	
ul.latest li.latestlist {
        font-weight:bold;
        text-align:center
        margin: 0px 0px 5px 1px;
        padding: 3px 0px 5px 3px;
	}

ul.latest li.latestlist a, a:visited {
        font-weight:bold;
        border-bottom: 1px dotted #000000;
        clear: both;
        padding: 3px 0px px 15px;
        text-align:center
        color: #1c1c1c;
	}

ul.latest li.latestlist a:hover {
        text-align:center
	color: #000000;
	text-decoration: underline;

	}
</style>

HTML Code:

<div style="background: #ffffff;
            border: 1px solid #C8C8C8;
            -moz-border-radius: 0px 0px 8px 8px;
            -webkit-border-radius: 0px 0px 8px 8px;
            -khtml-border-radius: 0px 0px 8px 8px;
            border-radius: 0px 0px 8px 8px;">

<ul class="latest">

<li class="latestlist"><a href="#">Some text here....</a></li>
<li class="latestlist"><a href="#">Some text here....</a></li>
<li class="latestlist"><a href="#">Some text here....</a></li>
<li class="latestlist"><a href="#">Some text here....</a></li>
<li class="latestlist"><a href="#">Some text here....</a></li>


</ul>

</div>

**chrishirst** · 03-29-2011, 04:18 AM

apply the border rules to the <li> rather than to the child <a>nchor elements.

**asmalik12** · 03-29-2011, 04:35 AM

Thnx. Now, how to get bottom-border centered?

Code:

<style>
ul.latest {
	list-style-type: none;
        margin: 0px;
	padding: 0px 0px 5px 10px;
	}
	
ul.latest li.latestlist {
        font-weight:bold;
        text-align:center
        margin: 0px 0px 5px 0px;
        padding: 3px 0px 5px 3px;
        border-bottom: 1px dotted #000000;
	}

ul.latest li.latestlist a, a:visited {
        font-weight:bold;
        
        clear: both;
        padding: 3px 0px px 15px;
        text-align:center
        color: #1c1c1c;
	}

ul.latest li.latestlist a:hover {
        text-align:center
	color: #000000;
	text-decoration: underline;

	}
</style>

**chrishirst** · 03-29-2011, 04:51 AM

You can't "centre" something that is full width.

**asmalik12** · 03-29-2011, 05:09 AM

Ok. I used incorrect word "centered".

But It shouldn't be like this

**chrishirst** · 03-29-2011, 05:16 AM

Take a look at the W3c box model

As you can see from that, it is either the left padding of the parent and/or the left margin of the child that is creating the "spacing"

**shivaji** · 03-29-2011, 11:42 PM

Change padding definition for ul
ul.latest {
list-style-type: none;
margin: 0px;
padding: 0px 10px 5px 10px;
}

**Shey** · 03-30-2011, 03:06 PM

you mean inline blocked text?

add to your <li class

Code:

display: inline-block;
display: inline;

or you can try
float:

with small adjustment to the width