CSS问题<li>高度

问题描述

| 请检查以下一项： 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>

解决方法

我的解决方案是将li.tittle的背景色设置为不是ul而是设置为ul。那么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/ , 为什么使用列表？此处使用的适当元素是定义列表（<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>

而且你所有的垫片都消失了...

li 问题问题高度高度

CSS问题<li>高度

问题描述

解决方法

相关问答