如何减小按钮的宽度？答案

【问题标题】：How do I reduce the width of the button?如何减小按钮的宽度？
【发布时间】：2020-09-14 07:38:30
【问题描述】：

我有一个按钮，无论我做什么，它都会自动在左侧和右侧添加填充，我似乎无法减少。

我尝试过使用 max-width 但这只会使按钮移动到页面的左侧

.hero-container-2 {
  background-color: #214CCE;
  display: inline-block;
  margin-top: 150px;
  padding: 150px;
}

.hero-container-2 p {
  display: inline-block;
  color: #ffffff;
  text-align: center;
  line-height: 2;
  margin-bottom: 50px;
}

.buttom {
  border: solid 2px #ffffff;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  padding: 15px 40px;
  font-family: 'PT Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
}

<div class="hero-container-2">
  <span id="contactus"></span>
  <p><span id="contactus">Itching to ask us a question about the club? Want to pick our brains about training, competing or joining? (We usually react quickly, but it might take us a handful of days to reply).</span></p>

  <div class="buttom">
    <span id="contactus">Contact Us</span>
  </div>
</div>

【问题讨论】：

你添加了 padding: 15px 40px;表示左右 40px 的边距
添加宽度按钮类width: 120px;并减少填充
你的意思是你希望按钮是页面的全宽（蓝色区域）？如果是这种情况，您为父容器设置了 150 像素的填充，这也会影响按钮
您为什么使用span 作为按钮？你没有使用正确的工具来完成这项工作。至少我会考虑一个锚标签。您的提示文本 Itching to ask.... 也与您的按钮具有相同的类 (buttom??)。
这能回答你的问题吗？ How to set the size of button in HTML

标签： html css

【解决方案1】：

将这两行添加到您的 css 中

.buttom {
  ...
  width: 100px;
  margin: 0 auto;
}

通过向 div 添加“宽度”，这将尝试移动到默认左侧。添加 'margin: 0 auto' 将使 div 居中

.hero-container-2 {
  background-color: #214CCE;
  display: inline-block;
  margin-top: 150px;
  padding: 150px;
}

.hero-container-2 p {
  display: inline-block;
  color: #ffffff;
  text-align: center;
  line-height: 2;
  margin-bottom: 50px;
}

.buttom {
  border: solid 2px #ffffff;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  padding: 15px 40px;
  font-family: 'PT Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 100px;
  margin: 0 auto;
}

<div class="hero-container-2">
  <span id="contactus"></span>
  <p><span id="contactus">Itching to ask us a question about the club? Want to pick our brains about training, competing or joining? (We usually react quickly, but it might take us a handful of days to reply).</span></p>

  <div class="buttom">
    <span id="contactus">Contact Us</span>
  </div>
</div>

【讨论】：

请加sn-p 谢谢

【解决方案2】：

将width 添加到按钮类并添加margin:0 auto; 减少padding。也就是说，

.buttom {
    padding: 15px 30px;
    width:120px;
    margin:0 auto;
}

.hero-container-2 {
  background-color: #214CCE;
  display: inline-block;
  margin-top: 150px;
  padding: 150px;
}

.hero-container-2 p {
  display: inline-block;
  color: #ffffff;
  text-align: center;
  line-height: 2;
  margin-bottom: 50px;
}

.buttom {
  border: solid 2px #ffffff;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  padding: 15px 30px;
  font-family: 'PT Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  width:120px;
  text-align:center;
  margin:0 auto;
}

<div class="hero-container-2">
  <span id="contactus"></span>
  <p><span id="contactus">Itching to ask us a question about the club? Want to pick our brains about training, competing or joining? (We usually react quickly, but it might take us a handful of days to reply).</span></p>

  <div class="buttom">
    <span id="contactus">Contact Us</span>
  </div>
</div>

【讨论】：

【解决方案3】：

首先，正如我在评论中所说，您应该使用正确的工具来完成这项工作；这是为了确保屏幕阅读器和其他残疾工具知道他们在处理什么。

因此，您可以使用边距解决间距问题：

<a href="contactus.htm" class="contact-us">Contact Us</a>

样式：

a.contact-us {
    width: 25%;
    max-width: 300px;
    margin: 0 auto;
}

这只是一个示例，但是，只要您的父容器设置为正确的宽度，按钮就会自动居中。

【讨论】：

【解决方案4】：

     .hero-container-2{
       background-color: #214CCE;
       display: inline-block;
       margin-top: 150px;
       padding: 150px;

       }

      .hero-container-2 p { 
       display: inline-block;
       color:#ffffff;
       text-align: center;
       line-height: 2;
       margin-bottom:50px;

      }

      .buttom {
       border: solid 2px #ffffff;
       text-align: center;
       color:#ffffff;
       cursor: pointer;
       padding: 15px 15px;
       font-family: 'PT Mono', monospace;
       text-transform: uppercase;
       letter-spacing: 1px;
       }

<div class="hero-container-2">
    <span id="contactus"></span>
         <p><span id="contactus">Itching to ask us a question about the club? Want to pick our brains about training, competing or joining? (We usually react quickly, but it might take us a handful of days to reply).</span></p>
       
         <div class="buttom">
        <span id="contactus">Contact Us</span>
    </div>
</div>

【讨论】：

【解决方案5】：

将display: inline-block; 添加到您的buttom 课程应该可以解决您的问题。

【讨论】：

（作为一个小黄人，你应该在使用buttom这个词后咯咯地笑！）