问题在较大的文本块旁边放置文本行

我试图在“Monday”旁边放置两行文本，旁边只有html和css，类似于您在下面的截图中看到的内容。问题在较大的文本块旁边放置文本行

alt text

在最终产品中的两条线，目前说“HI”和“嗒嗒”将文本和输入字段的一点点取代。截图版本是用下面的代码来实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
<!-- 
body { 
    font:12pt Arial, Helvetica, sans-serif; 
} 
dl, dd, dt { 
    margin:0px; 
    padding:0px; 
} 
dl { 
    clear:both; 
} 
dt { 
    float:left; 
    font-size:2.75em; 
    color:#ccc; 
    letter-spacing:-7px; 
    margin-right:10px; 
} 
--> 
</style> 
</head> 

<body> 
<dl> 
    <dt>MONDAY</dt> 
    <dd>hi</dd> 
    <dd>blah</dd> 
</dl> 

<dl> 
    <dt>WEDNESDAY</dt> 
    <dd>hi</dd> 
    <dd>blah</dd> 
</dl> 
</body> 
</html>

我想它使一切都很好地垂直对齐...即顶线的顶部字上方的“星期一”对齐底线的底部与单词“Monday”的底部对齐。我不认为使用定义列表将会非常灵活，或者完成这种外观的正确方法。有关如何做到这一点的任何建议？我宁愿远离图像，以便一个人看起来不错，如果有人扩大了网页......但把你所有的想法扔在那里。谢谢。

来源

2009-08-20 blcArmadillo

你想要的东西沿着我在这里的东西。你将不得不尝试像素完美。我不使用定义列表的原因是，您不能将这两个定义作为块来处理，而这依赖于它。这里的关键要素是手动设置行高。这里的确切标记并不重要，但这是可以完成的一种方式。

<h2>MONDAY</h2> 
<ul> 
    <li>hi</li> 
    <li>blah</li> 
</ul> 

* { 
    margin: 0; 
    padding: 0; 
} 
body { 
    padding: 100px 0 0 100px; 
} 
h2 { 
    font: 40px sans; 
    width: 200px; 
    line-height: 36px; 
    float: left; 
} 
ul { 
    height: 40px; 
    float: left; 
    list-style-type: none; 
    margin-top: -2px; 
} 
li { 
    font: 16px sans; 
    line-height: 16px; 
    margin-top: 2px; 
}

（另一种可能有用的性质是vertical-align，其可用于与文本行中的文本定位，而不是收缩文本行以适合文本。

还要注意，物理文本将看起来小于您设置的文本高度，因为您需要考虑下边界 - 文本行下方的字母部分，例如小写的g，p，y等，这就是为什么您需要如果你改变文字大小，你可以使用精确的像素数量，字体之间也可能有所不同 - 你需要一个跨平台支持的平台，以在所有平台上获得好的效果。）

来源

2009-08-20 02:35:31

我已经想出了以下解决方案（让我知道你怎么想的吧）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link href="reset.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
<!-- 
body { 
    font:12pt Arial, Helvetica, sans-serif; 
} 
.container { 
    position:relative; 
} 
.day { 
    font-size:2.75em; 
    color:#ccc; 
    letter-spacing:-7px; 
    margin-right:15px; 
} 
.line1 { 
    position:absolute; 
    top:0px; 
    margin-top:5px; 
} 
.line2 { 
    position:absolute; 
    bottom:0px; 
    margin-bottom:7px; 
} 

--> 
</style> 
</head> 

<body> 
<div class="container"> 
<span class="day">MONDAY</span> 
<span class="line1">hi</span> 
<span class="line2">blah</span> 
</div> 
</body> 
</html>

我还是想看看其他的想法，所以如果你有一个，请张贴。谢谢。

来源

2009-08-20 03:22:30 blcArmadillo

它的工作原理。 line1对我来说太高了（FF 3.5.2，Fedora Linux）。（虽然这只是发生，但与方法无关。）我这样做的主要原因（与此相反）是，这需要您使用的每个HTML元素都有一个CSS类，而我如果可能，宁愿避免。这虽然工作得很好。 – 2009-08-20 06:06:09

问题在较大的文本块旁边放置文本行

回答

相关问题