0

我正在尝试将两行文本放置在像“星期一”这样的单个单词旁边，其中只有 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>

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

4

2 回答 2

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

于 2009-08-20T02:35:31.863 回答
1

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

<!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-20T03:22:30.397 回答