宽度不会从 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 & DMCA Guidelines</div></a>
<a href="https://www.youtube.com/"><div class="sandrhelp">Support & 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 & 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 & DMCA Guidelines</div>
</a>
<a href="https://www.youtube.com/">
<div class="sandrhelp">Support & 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 & 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 & DMCA Guidelines</a>
<a href="https://www.youtube.com/">Support & 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 & Settings</a>
</div>
<div class="seperator" style="clear:both;"></div>
</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 & DMCA Guidelines</div></a>
<a href="https://www.youtube.com/"><div class="sandrhelp">Support & 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 & 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 & DMCA Guidelines</div>
</a>
<a href="https://www.youtube.com/">
<div class="sandrhelp">Support & 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 & 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 & DMCA Guidelines</a>
<a href="https://www.youtube.com/">Support & 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 & Settings</a>
</div>
<div class="seperator" style="clear:both;"></div>
</div>