较大文本块旁边的文本行定位问题答案

【问题标题】：Problem positioning lines of text next to a larger text block较大文本块旁边的文本行定位问题
【发布时间】：2009-08-20 11:22:30
【问题描述】：

我正在尝试将两行文本放置在像“Monday”这样的单个单词旁边，仅使用 html 和 css，类似于您在下面的屏幕截图中看到的内容。

在最终产品中，当前显示“hi”和“blah”的两行将被替换为一些文本和输入字段。截图版本使用以下代码完成：

<!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>

我希望一切都很好地垂直对齐...即顶行的顶部与“星期一”一词的顶部对齐，底行的底部与底部对齐“星期一”这个词。我不认为使用定义列表会非常通用或完成这种外观的正确方法。关于如何做到这一点的任何建议？我宁愿远离图像，这样如果有人放大页面，一切看起来都很好......但是把你所有的想法都扔在那里。谢谢。

【问题讨论】：

标签： html css alignment

【解决方案1】：

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

<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 等。，这就是为什么如果您更改文本大小，您需要使用确切的像素数量。字体之间的情况也可能有所不同——您需要一种得到良好跨平台支持的字体，以便在所有平台上获得良好的效果。）

【讨论】：

【解决方案2】：

我想出了以下解决方案（让我知道你的想法）：

<!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>

我仍然希望看到其他想法，所以如果您有其他想法，请发布。谢谢。

【讨论】：

它有效。 line1 对我来说像素太高了（FF 3.5.2，Fedora Linux）。（尽管这会发生，与方法无关。）我这样做的主要原因（与这种方式相反）是这需要在您使用的每个 HTML 元素上都有一个 CSS 类，我更喜欢如果可能的话，避免这种情况。不过这也很好用。