Question

我正在编写一个顶部有横幅的页面，其中应包含一系列按钮。以下代码适用于所有按钮，当它们应并排显示时，按钮将采用新行。我知道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>

Answer 1

要使填充仍然适用于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对于单个元素是唯一的。如果您有多个按钮，请使用类。我也调整了它。

Answer 2

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

ID-s也应该是唯一的。

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

Answer 3

您应该display: inline使用div而不是span。

div默认情况下将display设置为block，而span设置为inline。您无法将padding或margin值设置为span，因为它旨在以更轻的方式使用（例如，某些字词的下划线或斜体）。因此，最好使用div，如果可以，请设置display: inline等属性以满足特殊需求。

防止<div>采取新的行; <span>无效</span> </div>

3 个答案: