很简单，利用span本身文字宽度自适应属性，和下边框厚度即可解决，再用padding设置下边框和文字之间的间距。代码已经过成功测试：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html charset=GB2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.border {
color: red
font-size: 16px
font-weight: bold
line-height: 28px
border-bottom: 3px solid red
padding-bottom: 3px
}
-->
</style>
</head>
<body>
<span class="border">2014持续高温.2014持续高温.2014持续高温.</span><br />
<span class="border">2014持续高温.持续高温.</span><br />
<span class="border">2014持续高温.2014持续高温.</span><br />
</body>
</html>
很简单呀，看过来：<body>
<div class="all">
<p>栏目标题</p>
<p><a href="#">更多>></a></p>
<div style="clear:both"></div>
</div>
</body>
<style>
a{ display:inline-blockcolor:#000text-decoration:none}
.all{ width:50%margin:0 autobackground:#cccpadding:0 20px}
.all p:first-child{ float:leftfont-size:16pxcolor:#000line-height:1.5}
.all p:nth-child(4n+2){ float:right}
</style>
还有不懂的可以继续问我。
纯手打，望采纳~
css中加边框,首先我们需要确定你要加边框的元素的id或者是id，还有你必须保证这个元素是块级元素，不然width和height对它是无效的，自然也没边框，通过加display:block这个属性，来改成块级元素，具体看代码:<html>
<head>
<style>
.div1{ //div本身就是块级，所以不需要，算span这中标签就是行级，所以需要display:block
width:600px
height:200px
font-size:13px
border:1px solid #f00
}
</head>
<body>
<div class='div1'>
</div>
</body>
</html>
