时间戳

首页 > 解决方案 > 宽度不会从 Div 中删除

html - 宽度不会从 Div 中删除

问题描述

我正在尝试创建按钮，并且我有一个父 div 将所有其他 div 放在一起。但是，与父 div 的东西，它正在创建自己的宽度，它不会在其他 div 周围创建自动宽度。

我只想将所有按钮/div 完美居中，而父 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>

标签： htmlcsswidth

解决方案

您可以摆脱.help-parent类的宽度并添加display: flex; flex-direction: column; align-items: center;到中心的 div。但是，您必须删除floaton.toplinks div, .middlelinks div, .bottomlinks div才能使其正常工作。同样由于删除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>

推荐阅读