在下面的 HTML/CSS 代码中我遇到了两个问题:
result类框在顶部、左侧和底部都有两倍大小的轮廓。group类元素伸出屏幕右侧。
我可以更改什么以使所有 block 元素在屏幕右侧干净利落地结束并为它们提供 1px 的轮廓？
谢谢， 保罗H
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.result
{
border: 1px solid #FFFFFF;
outline: 1px solid #98BF21;
color: #FFFFFF;
background-color: #98BF21;
font-size: 11px;
font-weight: bold;
text-align: center;
text-decoration: none;
width: 70px;
display: inline-block;
}
.group
{
border: 1px solid #98BF21;
background-color: #EEFFCC;
position:relative;
left: 72px;
}
.summary
{
outline: 1px solid #98BF21;
color: #333333;
background-color: #EEFFCC;
font-size: 15px;
font-family: "Lucida Console","courier new";
line-height: 25px;
}
.summary p
{
padding-left: 7px;
margin: 0px;
display: inline;
vertical-align: middle;
}
.detail
{
font-size: 13px;
font-family: "Lucida Console","courier new";
}
.detail p
{
padding-left: 7px;
margin: 5px 0px;
white-space: pre;
}
</style>
</head>
<body>
<div class="summary"><span class="result">esse ︾</span><p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p></div>
<div class="group">
<span class="detail">
<p>labore et dolore magna aliqua</p>
</span>
<div class="summary"><span class="result">esse »</span><p>Ut enim ad minim veniam, quis nostrud exercitation</p></div>
</div>
</body>
</html>
编辑: 我正在使用 Firefox 4.0B12。无论出于何种原因，IE8 都不显示双轮廓。
编辑 2: 所需的输出将是这样的。单一的、不重叠的轮廓都在屏幕右侧的同一点结束。
+------+-------------------------------------------------------------------+
| esse | consectetur adipisicing elit, sed do eiusmod tempor incididunt ut |
+------+-------------------------------------------------------------------+
| labore et dolore magna aliqua |
+------+------------------------------------------------------------+
| esse | Ut enim ad minim veniam, quis nostrud exercitation |
+------+------------------------------------------------------------+
最佳答案
变化: 左:72px； 到: margin-left: 72px;
您能否提供有关线条的更多详细信息，或者您希望它看起来像什么的图像。
关于html - 在同一垂直线上结束 block 元素；固定双轮廓，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5183978/