1

ヘルプ！このボックスは、IE と Chrome で 100% ズームのテキストの長さとまったく同じサイズです。しかし、私の携帯電話で見ると、ボックスがテキストの長さからはみ出しています。これを修正することは可能ですか？

<style type="text/css">
#box{
width:375px;
background:blue;
font-size:16px;
font-family:Courier New, Courier, monospace;
}

#textbox{
background:pink;
font-size:16px;
font-family:Courier New, Courier, monospace;
}
</style>

<html>
<head>
<div id="box">Box</div>
<div id="textbox">|1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ|</div>
</head>
</html>
4

1 に答える 1

1

まず、ブラウザによってフォント幅の解釈が異なります。フォントの幅に頼るのは理想的ではありません。

代わりに、ボックスを同じ幅に合わせたい場合は、ボックスをラップし<div>て設定します。

<div class="wrapper">
<div id="box">Box</div>
<div id="textbox">|1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ|</div>
</div>

あなたが投稿したコードに関する他のいくつかの問題。

  1. 埋め込みスタイルは head タグ内に配置する必要があります。
  2. <html>以外のものをタグの前に置いてはなりません。<!doctype>
  3. を頭の中に入れないでください<div>。彼らはにのみ属します<body>

は、<head>データの初期化に使用されます。を使用<body>してデータを表示します。

于 2012-10-10T18:11:23.937 に答える