1

我正在编写一个顶部带有横幅的页面，该页面应包含一系列按钮。以下代码适用于所有按钮，但按钮应并排显示时换行。我知道 div 会自动换行，我应该使用 span，但是当我这样做时，它不会像使用 div 那样拉伸横幅以适应按钮。我尝试过使用多种浮点数，但无济于事。

<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

要使填充仍然在像 a 这样的内联元素上起作用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 对于单个元素是唯一的。如果您有多个按钮，请使用类。我也调整了。

于 2013-03-11T14:19:01.020 回答
1

制作你的<div>-s inline-block- DEMO

ID-s 也应该是唯一的。

如果你需要按钮，那么你必须使用<button>标签——它只是更具有语义意义。它可以设计成任何你想要的样式 - DEMO

于 2013-03-11T14:17:22.140 回答
-1

您应该使用display: inlinefor adiv而不是使用 a span。

div将 设置为display默认block情况下，而span设置为inline. 您不能设置padding或设置margin值，span因为它旨在以更轻松的方式使用（例如，某些单词的下划线或斜体）。因此，div如果可以这样做并设置属性display: inline以满足特殊需求，则最好使用。

于 2013-03-11T14:12:37.220 回答