CSS问题<li>高度

分类：编程问答

如何解决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>
而且你所有的垫片都消失了...     

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot