6

Firefox アドオン内のパネルのコンテンツとして使用するフォームを含む単純な HTML ドキュメントを作成しています。現在、ドキュメントにはラベルとテキスト ボックスが含まれており、これをページの幅全体に広げて、両側に 5 ピクセルのマージンを持たせたいと考えています。この私のコード:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Phrase Indexer</title>
  <style type="text/css" media="all">
  body {
    font: 10pt arial, helvetica, sans-serif;
    padding: 0;
    margin: 5px;
    position: fixed;
    width: 100%;
  }
  div {
    width: inherit
  }
  #phrase {
    width: inherit;
  }
  </style>

</head>

<body>

<div>
<label for="phrase">Passphrase</label><br />
<input type="text" id="phrase" />
</div>

</body>

</html>

これはほとんど機能しますが、右側に 5px の余白がないことを除けば、テキスト ボックスはページの端まで伸びています。どうすればこれを修正できますか?

これが私の問題のフィドルです。

4

4 に答える 4

3

次の方法で実行できます。

body
{
   font: 10pt arial, helvetica, sans-serif;
}

div
{
    padding: 0.5em;
}

div > *
{
    width: 100%;
}

JS Bin のデモは次のとおりです: http://jsbin.com/utabul/1

詳細はこちら: Set CSS 100% Width Minus Padding and Margin

于 2013-04-03T16:06:13.350 に答える
2

ボックスサイジングを試してみてください。フォーム要素をラップする div にマージンを追加し、ボディから位置を削除し、入力にボックス サイズを追加しました。

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */


body {
  font: 10pt arial, helvetica, sans-serif;
  padding: 0;
  margin:0;
  /* position: fixed; */
}
div {
  display:block;
  margin:5px;
}
#phrase {
  width: 100%;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}
于 2013-04-03T16:02:35.337 に答える
1

この方法を試してください：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Phrase Indexer</title>
  <style type="text/css" media="all">
  *{
      margin:0;
      padding:0;
  }
  body {
  }
  div {
  }
  #phrase {
    width: 100%;
    margin:5px;
  }
  </style>

</head>

<body>

<div>
<label for="phrase">Passphrase</label><br />
<input type="text" id="phrase" />
</div>

</body>

</html>
于 2013-04-03T15:51:53.827 に答える