CSS问题<li>高度

Question

请勾选这个:

http://jsfiddle.net/sasindu555/nNyxk/8/

您可以看到描述、特点和联系方式 <li>标签未完全填充背景色。请帮我解决这个问题。

---

这是 CSS:

#h-spacer {
    width:auto;
    height:1px;
    clear:both;
    font-size:0
}
#property-details {
    margin:0 auto;
    width:auto;
    height:auto;
    float:left;
    padding:0px;
    border-left:solid #65C6ED 1px;
    border-top:solid #65C6ED 1px
}
#property-details ul {
    width:auto;
    height:auto;
    padding:0;
    margin:0 auto;
    display:block;
    border-bottom:solid #65C6ED 1px
}
#property-details ul li {
    float:left;
    height:auto;
    list-style-image:none;
    list-style-type:none;
    text-align:left;
    padding:2px 5px;
    color:#4f4f4f;
    line-height:1.8em;
    font-size:11px;
    border-right:solid #65C6ED 1px
}
#property-details ul li.title {
    width:140px;
    font-weight:600;
    background:#e5f8ff
}
#property-details ul li.data {
    width:360px;
    font-weight:normal;
    background:#f1fbff
}

#property-details-sub.sub {
    margin:0 auto;
    height:auto;
    width:369px;
    padding:0px;
    border-left:solid #65C6ED 1px;
    border-top:solid #65C6ED 1px
}
#property-details-sub ul {
    width:auto;
    height:auto;
    padding:0;
    margin:0 auto;
    display:block;
    border-bottom:solid #65C6ED 1px
}
#property-details-sub ul li {
    float:left;
    height:auto;
    list-style-image:none;
    list-style-type:none;
    text-align:left;
    padding:2px 5px;
    color:#4f4f4f;
    line-height:1.8em;
    font-size:11px;
    border-right:solid #65C6ED 1px
}
#property-details-sub ul li.title-sub {
    width:100px;
    font-weight:600;
    background:#e5f8ff
}
#property-details-sub ul li.data-sub {
    width:247px;
    font-weight:normal;
    background:#f1fbff
}

和 HTML:

<div id="property-details">
    <ul>
        <li class="title">Category</li>
        <li class="data">House for Sale</li>
        <div id="h-spacer"></div>
    </ul>
    <ul>
        <li class="title">Reference Number</li>
        <li class="data">10066</li>
        <div id="h-spacer"></div>
    </ul>
    <ul>
        <li class="title">Published On</li>
        <li class="data">June 07,2011</li>
        <div id="h-spacer"></div>
    </ul>
    <ul>
        <li class="title">Description</li>
        <li class="data">House for Sale Akuregoda House Built in a 12.5 Perch Land Located at 200m away from The Akuregoda Main Road With 6 Rooms, 3 Bath rooms, Living Room, Dining Room Surrounded By walls With an Annex is Available for Sale at Rs 42 (Negotiable) 4.2 Million </li>
        <div id="h-spacer"></div>
    </ul>
    <ul>
        <li class="title">Location - District</li>
        <li class="data">Colombo</li>
        <div id="h-spacer"></div>
    </ul>
    <ul>
        <li class="title">Location - City</li>
        <li class="data">Akuregoda</li>
        <div id="h-spacer"></div>
    </ul>
    <ul>
        <li class="title">Property address</li>
        <li class="data">Akuregoda, Colombo</li>
        <div id="h-spacer"></div>
    </ul>
    <ul>
        <li class="title">Number of Rooms</li>
        <li class="data">6</li>
        <div id="h-spacer"></div>
    </ul>
    <ul>
        <li class="title">Number of Floors</li>
        <li class="data">2</li>
        <div id="h-spacer"></div>
    </ul>
    <ul>
        <li class="title">Floor Area </li>
        <li class="data">1200</li>
        <div id="h-spacer"></div>
    </ul>
    <ul>
        <li class="title">Land Area </li>
        <li class="data">Acres : 0 / Perches :28.00</li>
        <div id="h-spacer"></div>
    </ul>
    <ul>
        <li class="title">Selling Price </li>
        <li class="data">Rs. 4,200,000.00</li>
        <div id="h-spacer"></div>
    </ul>
    <ul>
        <li class="title">Features </li>
        <li class="data">    » Air Conditioned<br />
            » Cable TV<br />
            » Garage<br />
            » Hot Water<br />
            » Internet<br />
            » Parapet Wall<br />
            » Pipe Bourne Water<br />
            » Telephone Line<br />
            » Veranda<br /></li>
        <div id="h-spacer"></div>
    </ul>
    <ul>
        <li class="title">Property Availablity</li>
        <li class="data">Immediatly available</li>
        <div id="h-spacer"></div>
    </ul>
    <ul>
        <li class="title">Advertisment expires</li>
        <li class="data">In 10 days</li>
        <div id="h-spacer"></div>
    </ul>
    <ul>
        <li class="title">Contact Details</li>
        <li id="property-details-sub" class="sub">
            <ul>
                <li class="title-sub">Name</li>
                <li class="data-sub">Sasindu Hewage</li>
                <div id="h-spacer"></div>
            </ul>
            <ul>
                <li class="title-sub">Address</li>
                <li class="data-sub">627, Thalangama South</li>
                <div id="h-spacer"></div>
            </ul>
            <ul>
                <li class="title-sub">Contact number</li>
                <li class="data-sub">+94779559589</li>
                <div id="h-spacer"></div>
            </ul>
            <ul>
                <li class="title-sub">Inquiry via Email</li>
                <li class="data-sub">Send an inquiry</li>
                <div id="h-spacer"></div>
            </ul>
            <ul>
                <li class="title-sub">Skype Id</li>
                <li class="data-sub">sasindu</li>
                <div id="h-spacer"></div>
            </ul>
        </li>
        <div id="h-spacer"></div>
    </ul>
</div>

Answer 1

我的解决办法是把li.tittle的背景色设置成ul，而不是li。 那么问题就出在li的border-right属性上，所以把这个border-right属性移到#property-details ul li.data项，改成border-left。

因此，我建议进行以下更改:

#property-details ul { 
    background-color: #E5F8FF
}
#property-details ul li.data { 
    border-right:solid #65C6ED 1px;
    border-left:solid #65C6ED 1px;
}
/* remove this from your css:
   #property-details ul li {
       border-right: solid #65C6ED 1px;
   }
*/

http://jsfiddle.net/nNyxk/21/