Question

有谁知道如何在按钮之间放置一些空格（按钮充当链接）？我无法在任何地方找到答案......

CSS代码：

.btn {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0px;
-webkit-box-shadow: 6px 1px 18px #666666;
-moz-box-shadow: 6px 1px 18px #666666;
box-shadow: 6px 1px 18px #666666;
font-family: Arial;
color: #ffffff;
font-size: 14px;
background: #447494;
padding: 6px 25px 6px 10px;
text-decoration: none;


.btn:hover {
background: #079ce6;
text-decoration: none;

}

I want some space beteen the buttons

Answer 1

下面列出了要使用的示例代码段。

它应该基本上取决于标记的结构。在下面的示例中，新的class被添加到突出显示情况，但您可以删除此类并将该属性添加到.btn：

.btn {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  -webkit-box-shadow: 6px 1px 18px #666666;
  -moz-box-shadow: 6px 1px 18px #666666;
  box-shadow: 6px 1px 18px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
  background: #447494;
  padding: 6px 25px 6px 10px;
  text-decoration: none;
}
.btn:hover {
  background: #079ce6;
  text-decoration: none;
}
.btn-space {
  margin: 10px 0;
}

<div class="btn">Button 1</div>
<div class="btn btn-space">Button 2 - give me some space!</div>
<div class="btn">Button 3</div>
<div class="btn">Button 4</div>
<div class="btn">Button 5</div>
<div class="btn">Button 5</div>
<div class="btn">Button 6</div>
<div class="btn">Button 7</div>
<div class="btn">Button 8</div>
<div class="btn">Button 9</div>
<div class="btn">Button 10</div>

修改以更新问题：按钮充当链接

根据要求使用 - display: block;或display:inline-block等显示属性。

包含anchor标记的示例：

.btn {
  display: block;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  -webkit-box-shadow: 6px 1px 18px #666666;
  -moz-box-shadow: 6px 1px 18px #666666;
  box-shadow: 6px 1px 18px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
  background: #447494;
  padding: 6px 25px 6px 10px;
  text-decoration: none;
}
.btn:hover {
  background: #079ce6;
  text-decoration: none;
}
.btn-space {
  margin: 10px 0;
}

<a class="btn">Button 1</a>
<a class="btn btn-space">Button 2 - give me some space!</a>
<a class="btn">Button 3</a>
<a class="btn">Button 4</a>
<a class="btn">Button 5</a>
<a class="btn">Button 5</a>
<a class="btn">Button 6</a>
<a class="btn">Button 7</a>
<a class="btn">Button 8</a>
<a class="btn">Button 9</a>
<a class="btn">Button 10</a>

Answer 2

.btn {
   margin-top: 30px;
}

使用边距在元素边界之间留出空间。

在链接按钮CSS之间创建空格

2 个答案: