宽度不会从 Div 中删除

Width will not remove from Div

我正在尝试创建按钮,我有一个父 div 将所有其他 div 放在一起。但是,父 div 的问题是,它正在创建自己的宽度,它不会在其他 div 周围创建自动宽度。

我只想将所有 buttons/divs 完美居中,父级 div 的宽度妨碍了我。

任何帮助都会很棒,谢谢!!

<style>
h1.helph1 {
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-weight: 100;
    padding-bottom: 40px;
    padding-top: 20px;
    border-bottom: #e3e3e3 solid 1px;
}

.toplinks div, .middlelinks div, .bottomlinks div {
    float: left;
    width: 250px !important;
}

.helpparent .toplinks div, .middlelinks div, .bottomlinks div{
    background: #2fb796;
    padding: 10px;
    margin: 10px;
    color: white;
    font-family: Montserrat;
    text-align: center;
}

.helpparent  {
    width: 66.1%;
    margin: 0 auto;
}
</style>
<html>
<h1 class="helph1">Forum Help Center</h1>

<div class="helpparent">
  
  <div class="toplinks">  
    <a href="https://www.youtube.com/"><div class="announcementhelp">Announcements</div></a>
 <a href="https://www.youtube.com/"><div class="gettingstartedhelp">Getting Started</div></a>
 <a href="https://www.youtube.com/"><div class="gasrhelp">GASR 101</div></a>
  </div>
  
   <div class="seperator" style="clear:both;"></div>  
  
  <div class="middlelinks">   
 <a href="https://www.youtube.com/"><div class="forumshophelp">Forums and Shops</div></a>
 <a href="https://www.youtube.com/"><div class="rulesdmcahelp">Community &amp; DMCA Guidelines</div></a>
 <a href="https://www.youtube.com/"><div class="sandrhelp">Support &amp; Report System</div></a>
  </div>
  
 <div class="seperator" style="clear:both;"></div>  
  
  <div class="bottomlinks">   
 <a href="https://www.youtube.com/"><div class="eventhelp">Forum Events</div></a>
 <a href="https://www.youtube.com/"><div class="storehelp">GASR Store</div></a>
 <a href="https://www.youtube.com/"><div class="profilehelp">Your Profile &amp; Settings</div></a>
  </div>
  
 <div class="seperator" style="clear:both;"></div>    
  
  </div>

</html>

您可以去除 .help-parent class 上的宽度并添加 display: flex; flex-direction: column; align-items: center; 以使 div 居中。但是,您必须删除 .toplinks div, .middlelinks div, .bottomlinks div 上的 float 才能正常工作。此外,由于删除了 float,链接上的 text-decoration 似乎又回来了,所以我将 text-decoration: none; 添加到您的 <a> 标签中。

<style>h1.helph1 {
  text-align: center;
  font-family: Montserrat, sans-serif;
  font-weight: 100;
  padding-bottom: 40px;
  padding-top: 20px;
  border-bottom: #e3e3e3 solid 1px;
}

.toplinks div,
.middlelinks div,
.bottomlinks div {
  width: 250px !important;
}

a {
  text-decoration: none;
}

.helpparent .toplinks div,
.middlelinks div,
.bottomlinks div {
  background: #2fb796;
  padding: 10px;
  margin: 10px;
  color: white;
  font-family: Montserrat;
  text-align: center;
}

.helpparent {
  display: flex;
  flex-direction: column;
  align-items: center;
}

</style>
<html>
<h1 class="helph1">GASR Help Center</h1>

<div class="helpparent">

  <div class="toplinks">
    <a href="https://www.youtube.com/">
      <div class="announcementhelp">Announcements</div>
    </a>
    <a href="https://www.youtube.com/">
      <div class="gettingstartedhelp">Getting Started</div>
    </a>
    <a href="https://www.youtube.com/">
      <div class="gasrhelp">GASR 101</div>
    </a>
  </div>

  <div class="seperator" style="clear:both;"></div>

  <div class="middlelinks">
    <a href="https://www.youtube.com/">
      <div class="forumshophelp">Forums and Shops</div>
    </a>
    <a href="https://www.youtube.com/">
      <div class="rulesdmcahelp">Community &amp; DMCA Guidelines</div>
    </a>
    <a href="https://www.youtube.com/">
      <div class="sandrhelp">Support &amp; Report System</div>
    </a>
  </div>

  <div class="seperator" style="clear:both;"></div>

  <div class="bottomlinks">
    <a href="https://www.youtube.com/">
      <div class="eventhelp">Forum Events</div>
    </a>
    <a href="https://www.youtube.com/">
      <div class="storehelp">GASR Store</div>
    </a>
    <a href="https://www.youtube.com/">
      <div class="profilehelp">Your Profile &amp; Settings</div>
    </a>
  </div>

  <div class="seperator" style="clear:both;"></div>

</div>

</html>

尝试去掉 a 中的 div 元素。此 div 是不必要的,并且会使您的 a 没有可点击区域。

之后您可以选择使用 flex 来对齐您的内容

h1.helph1 {
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-weight: 100;
    padding-bottom: 40px;
    padding-top: 20px;
    border-bottom: #e3e3e3 solid 1px;
}

.toplinks a, .middlelinks a, .bottomlinks a {
    width: 250px !important;
}

.helpparent .toplinks a, .middlelinks a, .bottomlinks a{
    background: #2fb796;
    padding: 10px;
    margin: 10px;
    color: white;
    font-family: Montserrat;
    text-align: center;
}

.toplinks, .middlelinks, .bottomlinks  {
  display: flex;
  flex-direction: column;
  align-items: center;
}
<h1 class="helph1">Forum Help Center</h1>

<div class="helpparent">
  
  <div class="toplinks">  
    <a href="https://www.youtube.com/">Announcements</a>
 <a href="https://www.youtube.com/">Getting Started</a>
 <a href="https://www.youtube.com/">101</a>
  </div>
  
   <div class="seperator" style="clear:both;"></div>  
  
  <div class="middlelinks">   
 <a href="https://www.youtube.com/">Forums and Shops</a>
 <a href="https://www.youtube.com/">Community &amp; DMCA Guidelines</a>
 <a href="https://www.youtube.com/">Support &amp; Report System</a>
  </div>
  
 <div class="seperator" style="clear:both;"></div>  
  
  <div class="bottomlinks">   
 <a href="https://www.youtube.com/">Forum Events</a>
 <a href="https://www.youtube.com/">GASR Store</a>
 <a href="https://www.youtube.com/">Your Profile &amp; Settings</a>
  </div>
  
 <div class="seperator" style="clear:both;"></div>    
  
  </div>