0

下のスクリーンショットにあるような html と css だけで、"Monday" のような 1 つの単語の隣に 2 行のテキストを配置しようとしています。

代替テキスト

最終製品では、現在 "hi" と "blah" と表示されている 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>
<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

私は次の解決策を思いつきました（あなたの考えを教えてください）：

<!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 に答える
1

あなたは私がここに持っているものに沿った何かが欲しい. ピクセルの完璧さを試す必要があります。定義リストを使用しない理由は、両方の定義をブロックとして操作できないためです。ここでの重要な要素は、行の高さを手動で設定することです。ここでの正確なマークアップは重要ではありませんが、これはそれを行う 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;
}

(役に立つかもしれないもう 1 つのプロパティはvertical-alignです。これは、テキスト行をテキストに合わせて縮小するのではなく、テキスト行内にテキストを配置するために使用できます。

また、ディセンダー (小文字の g、p、y など、テキスト行の下にある文字の部分) を考慮する必要があるため、設定したテキストの高さよりも物理的なテキストが小さく見えることに注意してください。テキストサイズを変更する場合、正確なピクセル量で遊ぶ必要があるのはなぜですか。フォントによっても異なる場合があります。すべてのプラットフォームで適切な結果を得るには、クロスプラットフォームで十分にサポートされているフォントが必要です。)

于 2009-08-20T02:35:31.863 に答える