1

一連のボタンを含む上部にバナーのあるページをコーディングしています。次のコードはすべてで機能しますが、ボタンが並んで表示されるときに改行が行われます。div は自動的に新しい行を取得し、スパンを使用する必要があることは知っていますが、使用すると、div の場合のようにボタンに合わせてバナーが引き伸ばされません。float のいくつかのバリエーションを使用してみましたが、役に立ちませんでした。

<style type="text/css" media=screen>

body{
    margin: 0px;
    padding: 0px;
    color: #000;
    font-family: helvetica, times;
    font-size: 14px;
}

#wrapper{
  position: absolute;
  height: 100%;
  width: 100%;
  text-align:center;
}

#banner{
  background: url('images/banner_background.png');
  position: relative;
  margin: 0;
  width: 100%;
  color: #FFFFFF;
  z-index: 3;
}

#banner #button {
  padding:10px;
  margin:auto;
  position: relative;
  background: url('images/button.png');
  height: 100%;
  z-index: 4;
  width:100px;
}

</style>
</head>

<body>


<div id="wrapper">
  <div id="banner">

    <div id="button">
      dfsdfsfdsdfs
    </div>

    <div id="button">
      sddfdfdsf
    </div>

  </div>
</div>
4

3 に答える 3

5

のようなインライン要素でパディングを引き続き機能させるにはspan、これを に設定する必要がdisplay: inline-blockあります。ブロック要素とは異なり、パディングは引き続きテキスト フロー内にありますが、画像と同じように幅/高さ、パディング、およびマージンを受け入れます。デフォルトでは、画像はインライン ブロックです。

CSS:

#banner .button {
  display: inline-block;
  padding:10px;
  margin:auto;
  position: relative;
  background: url('images/button.png');
  height: 100%;
  z-index: 4;
  width:100px;
}

HTML:

<span class="button">
  sddfdfdsf
</span>
<span class="button">
  sddfdfdsf
</span>

重要: ID は 1 つの要素に固有です。複数のボタンがある場合は、クラスを使用します。それも調整しました。

于 2013-03-11T14:19:01.020 に答える
1

-s -デモ<div>を作成inline-block

また、ID は一意である必要があります。

また、ボタンが必要な場合は、<button>タグを使用する必要があります。これは、よりセマンティックな意味を持ちます。好きなようにスタイリングできます - DEMO

于 2013-03-11T14:17:22.140 に答える
-1

を使用するdisplay: inlineのではdivなく、を使用する必要がありますspan。

divをデフォルトに設定し、displayをに設定します。軽い方法で使用するように設計されているため、または値を設定することはできません（たとえば、一部の単語では下線または斜体）。したがって、そうすることができ、特別なニーズを満たすように属性を設定できる場合は、それを使用することをお勧めします。blockspaninlinepaddingmarginspandivdisplay: inline

于 2013-03-11T14:12:37.220 に答える