.
Hello;

I have got a <ul> list tag. Inside the tag I am using float left <li> list item tags. Inside each <li> tag I have got <span> tags.

Using float left the sum total left to right of the margins, borders, paddings, and contents for both list item tags must equal exactly the width of the <ul> tag in order for both list items to fit on the same line.

If the sum total width of both <li> tags exceed the width of the <ul> tag the last <li> tag will break onto a second line.

For example, if I decrease the width of the <ul> tag below from 94px to 93px the loss <li> tag will break and go onto a second line.

If I increase the width of the <ul> tag from 94px to 95px or more there is a gap between the loss <li> tag and the right border of the <ul> tag.

My question is about the widths of the <span> tags.

I can increase the width of the <span> tags below from 30px to 50px and the <span> tag exceeds the width of the <li> tag. The two <li> tags still stay on one line.

I can increase the border sizes of the <span> tags from 1px to 5px and the <li> tags still stay on one line (which is good - I want both <li> tags to be on the same line).

However, just testing, if I increase the borders to 25px it causes the last <li> loss tag to break to a second line.

Question 1: Am I supposed to somehow calculate the width of the <span> tag borders and include them into the width of the <ul> tag?

Question 2: Why is it that increasing the width of the <span> tags from 30px to 50px and the width of the <span> tag borders from 1px to 5px do not cause the last <li> tag to break to the second line; but in testing increasing the <span> tag border width to 25px it causes the second <li> tag to break to the second line?

Thanks.

PHP Code:
Calculate width for list item(sleft to right:

margin border padding width padding border margin width

Win
:  0px 1px 0px 40px 0px 1px 5px 47px
Loss
0px 1px 0px 40px 0px 1px 5px 47px

List width47px 47px 94px 
PHP Code:
ul.Legend
{
padding0px;
margin0px;
list-
style-typenone;
border1px solid black;
width94px;
overflowauto;
clearboth;
}

li.Win
{
margin0px 0px 0px 5px;
padding5px 0px 5px 0px;
border1px solid lightgrey;
floatleft;
width40px;
}

li.Loss
{
margin0px 0px 0px 5px;
padding4px 0px 4px 0px;
border1px solid darkgrey;
floatleft;
width40px;

PHP Code:
span.Win
{
border1px dashed black;
background-colortan;
displayinline-block;
width30px;
}

span.Loss
{
border1px dashed black;
background-colorgrey;
displayinline-block;
width30px;

PHP Code:
<ul class="Legend">

    <
li class="Win"><span class="Win">Win</span></li>

    <
li class="Loss"><span class="Loss">Loss</span></li>

</
ul