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

Почему вы используете списки? Подходящими элементами для использования здесь являются списки определений (<dl>). Вы даже можете использовать таблицы для этого (это табличные данные ).

CSS:

* {
    margin:0;
    padding:0
}
body {
    font-size:11px;
    margin:1em;
    color:#4f4f4f
}
ul {
    list-style-position:inside
}
#property-details {
    background:#e5f8ff;
    border-style:solid;
    border-color:#65c6ed;
    border-width:1px 1px 0;
    line-height:1.8em
}
#property-details dl {
    border-bottom:1px solid #65c6ed;
    position:relative
}
#property-details dt, #property-details dd {
    padding:2px 5px
}
#property-details dt {
    font-weight:600;
    width:140px;
    position:absolute;
    top:0;
    bottom:0;
    left:0
}
#property-details dd {
    background:#f1fbff;
    position:relative;
    left:140px;
    margin-right:140px;
    border-left:1px solid #65c6ed
}
#property-details .sub {
    padding:0
}
#property-details .sub dl:last-child {
    border:0
}

HTML (со списками определений):

<div id="property-details">
    <dl>
        <dt>Category</dt>
        <dd>House for Sale</dd>
    </dl>
    <dl>
        <dt>Reference Number</dt>
        <dd>10066</dd>
    </dl>
    <dl>
        <dt>Published On</dt>
        <dd>June 07,2011</dd>
    </dl>
    <dl>
        <dt>Description</dt>
        <dd>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 </dd>
    </dl>
    <dl>
        <dt>Location - District</dt>
        <dd>Colombo</dd>
    </dl>
    <dl>
        <dt>Location - City</dt>
        <dd>Akuregoda</dd>
    </dl>
    <dl>
        <dt>Property address</dt>
        <dd>Akuregoda, Colombo</dd>
    </dl>
    <dl>
        <dt>Number of Rooms</dt>
        <dd>6</dd>
    </dl>
    <dl>
        <dt>Number of Floors</dt>
        <dd>2</dd>
    </dl>
    <dl>
        <dt>Floor Area </dt>
        <dd>1200</dd>
    </dl>
    <dl>
        <dt>Land Area </dt>
        <dd>Acres : 0 / Perches :28.00</dd>
    </dl>
    <dl>
        <dt>Selling Price </dt>
        <dd>Rs. 4,200,000.00</dd>
    </dl>
    <dl>
        <dt>Features </dt>
        <dd>
            <ul>
                <li>Air Conditioned</li>
                <li>Cable TV</li>
                <li>Garage</li>
                <li>Hot Water</li>
                <li>Internet</li>
                <li>Parapet Wall</li>
                <li>Pipe Bourne Water</li>
                <li>Telephone Line</li>
                <li>Veranda</li>
            </ul>
        </dd>
    </dl>
    <dl>
        <dt>Property Availablity</dt>
        <dd>Immediatly available</dd>
    </dl>
    <dl>
        <dt>Advertisment expires</dt>
        <dd>In 10 days</dd>
    </dl>
    <dl>
        <dt>Contact Details</dt>
        <dd class="sub">
            <dl>
                <dt>Name</dt>
                <dd>Sasindu Hewage</dd>
            </dl>
            <dl>
                <dt>Address</dt>
                <dd>627, Thalangama South</dd>
            </dl>
            <dl>
                <dt>Contact number</dt>
                <dd>+94779559589</dd>
            </dl>
            <dl>
                <dt>Inquiry via Email</dt>
                <dd>Send an inquiry</dd>
            </dl>
            <dl>
                <dt>Skype Id</dt>
                <dd>sasindu</dd>
            </dl>
        </dd>
    </dl>
</div>

И все твои проставки ушли ...

Answer 2

Мое решение состоит в том, чтобы установить цвет фона li.tittle не в li, а установить его на ul. Тогда проблема остается для свойства border-right в li, поэтому переместите это свойство 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/