Question

我遇到了困扰我的问题。我搜遍了所有的答案，但找不到答案。

我有一个我直接用<a>标签制作的容器。最初，我的问题是可点击的链接区域超出了边界。然后，我从display: block移除了.bigButtonLink。这解决了这个问题，但随后出现了另外两个问题。 1.链接容器不再居中。 2.链接下的边距不是渲染。

有人看到我做错了吗？

＆＃13;

.sec {
	margin: 60px auto;
}
.bigButtonLink {
	text-decoration: none;
	/*display: block;*/
	text-align: center;
	margin: 50px auto;
}
.bigButton {
	border: 1px solid #BE1E2D;
	-webkit-appearance: none;
	border-radius: 2px;
	box-sizing: border-box;
	background: #FFF;
	font-family: 'Muli', sans-serif;
	color: #B82222;	
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid #B82222;
	font-size: 2.3rem;
	padding: 3rem 6rem 3rem 4.5rem;
}
#red {
  background: red;
  height: 200px;
  width: 100%;
}

＆＃13;

<div class="sec">
  <a href="#" class="bigButtonLink bigButton">
	  Request Quote 
  </a>
</div>
<div class="sec" id="red">
</div>

＆＃13;

Answer 1

将text-align: center;添加到小节类并制作a选择器display: inline-block;，这应该使其居中并保持元素周围的边距。

.sec {
	margin: 60px auto;
    text-align: center;
}
.bigButtonLink {
	text-decoration: none;
	display: inline-block;
	text-align: center;
	margin: 50px auto;
}
.bigButton {
	border: 1px solid #BE1E2D;
	-webkit-appearance: none;
	border-radius: 2px;
	box-sizing: border-box;
	background: #FFF;
	font-family: 'Muli', sans-serif;
	color: #B82222;	
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid #B82222;
	font-size: 2.3rem;
	padding: 3rem 6rem 3rem 4.5rem;
}
#red {
  background: red;
  height: 200px;
  width: 100%;
}

<div class="sec">
  <a href="#" class="bigButtonLink bigButton">
	  Request Quote 
  </a>
</div>
<div class="sec" id="red">
</div>

Answer 2

您必须添加text-align: center' to the selector。sec and display：inline-block to。bigButtonLink`。试试这段代码。

.sec {
    margin: 60px auto;
  text-align: center;
}
.bigButtonLink {
    text-decoration: none;
    text-align: center;
    margin: 50px auto;
  display: inline-block;
}

链接超过容器的宽度

2 个答案: