HTML5-按钮不相同

我试图使我的按钮具有相同的宽度，但由于某种原因，它行不通。为了确保所有按钮都符合这些所需的结果，需要做什么？

所有按钮都必须具有相同的宽度
所有按钮都不能使用页面的全部宽度

具有相同的宽度

/*File download button*/
.buttonFileDownload_container {
  text-align: center;
  margin-bottom: 20px;
}
.buttonFileDownload {
  display: inline-block;
  position: relative;
  padding: 10px 60px;
  background-color: transparent;
  border: 3px solid black;
  color: black;
  text-decoration: none!important;
  font-size: 1.5em;
  line-height: 1.2;
  text-align: center;
  text-indent: 15px;
}
.buttonFileDownload:before,
.buttonFileDownload:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 10px;
  top: 52%;
}
/* Download box shape  */
.buttonFileDownload:before {
  width: 20px;
  height: 4px;
  border-style: solid;
  border-width: 0 4px 4px;
}
/* Download arrow shape */
.buttonFileDownload:after {
  width: 0;
  height: 0;
  margin-left: 6px;
  margin-top: -140px;
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: transparent;
  border-top-color: inherit;
  animation: downloadArrow 2s linear infinite;
  animation-play-state: paused;
}
.buttonFileDownload:hover:before {
  border-color: black;
}
.buttonFileDownload:hover:after {
  border-top-color: black;
  animation-play-state: running;
}
/* keyframes for the download icon anim */
@keyframes downloadArrow {
  /* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
  0% {
    margin-top: -14px;
    opacity: 1;
  }
  0.001% {
    margin-top: -30px;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    margin-top: 0;
    opacity: 0;
  }
}

<p>Hello World</p>
<div class="buttonFileDownload_container">
  <a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
      Numbers description</a>
</div>
<div class="buttonFileDownload_container">
  <a href="#" class="buttonFileDownload"><u>Colours</u><br/>
      Colours description</a>
</div>
<div class="buttonFileDownload_container">
  <a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
      Onomatopoeia description</a>
</div>
<div class="buttonFileDownload_container">
  <a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
      Alphabet description</a>
</div>

所有按钮都必须具有相同的宽度

所有按钮都不能使用页面的全部宽度

主要技巧是在标记，新的CSS规则中添加包装器，并将buttonFileDownload设置为display: block。

.buttonFileDownload_wrapper {         /*  added rule        */
  display: inline-block;
}
.buttonFileDownload {
  display: block;                     /*  changed to block  */
  ...
}

如果您也希望它们以中心为中心，请将buttonFileDownload_wrapper的父级设置为text-align: center(在这种情况下为body(

body {
  text-align: center;                 /*  added property    */
}

堆栈片段

/*File download button*/
body {
  text-align: center;                 /*  added property    */
}
.buttonFileDownload_wrapper {         /*  added rule        */
  display: inline-block;
}
.buttonFileDownload_container {
  text-align: center;
  margin-bottom: 20px;
}
.buttonFileDownload {
  display: block;                     /*  changed to block  */
  position: relative;
  padding: 10px 60px;
  background-color: transparent;
  border: 3px solid black;
  color: black;
  text-decoration: none!important;
  font-size: 1.5em;
  line-height: 1.2;
  text-align: center;
  text-indent: 15px;
}
.buttonFileDownload:before,
.buttonFileDownload:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 10px;
  top: 52%;
}
/* Download box shape  */
.buttonFileDownload:before {
  width: 20px;
  height: 4px;
  border-style: solid;
  border-width: 0 4px 4px;
}
/* Download arrow shape */
.buttonFileDownload:after {
  width: 0;
  height: 0;
  margin-left: 6px;
  margin-top: -140px;
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: transparent;
  border-top-color: inherit;
  animation: downloadArrow 2s linear infinite;
  animation-play-state: paused;
}
.buttonFileDownload:hover:before {
  border-color: black;
}
.buttonFileDownload:hover:after {
  border-top-color: black;
  animation-play-state: running;
}
/* keyframes for the download icon anim */
@keyframes downloadArrow {
  /* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
  0% {
    margin-top: -14px;
    opacity: 1;
  }
  0.001% {
    margin-top: -30px;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    margin-top: 0;
    opacity: 0;
  }
}

<div class="buttonFileDownload_wrapper">
  <div class="buttonFileDownload_container">
    <a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
      Numbers description</a>
  </div>
  <div class="buttonFileDownload_container">
    <a href="#" class="buttonFileDownload"><u>Colours</u><br/>
      Colours description</a>
  </div>
  <div class="buttonFileDownload_container">
    <a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
      Onomatopoeia description</a>
  </div>
  <div class="buttonFileDownload_container">
    <a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
      Alphabet description</a>
  </div>
</div>

" width"是基于内容的，如果您不设置元素的宽度。因此，要么使所有内容都相同，要么在元素上设置宽度。

您需要设置元素的宽度，否则基于其内容长度。

例如：

/*File download button*/
.buttonFileDownload_container {
  text-align: center;
  margin-bottom: 20px;
}
.buttonFileDownload {
  display: inline-block;
  position: relative;
  padding: 10px 60px;
  background-color: transparent;
  border: 3px solid black;
  color: black;
  text-decoration: none!important;
  font-size: 1.5em;
  line-height: 1.2;
  text-align: center;
  text-indent: 15px;
min-width:250px;
}
.buttonFileDownload:before,
.buttonFileDownload:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 10px;
  top: 52%;
}
/* Download box shape  */
.buttonFileDownload:before {
  width: 20px;
  height: 4px;
  border-style: solid;
  border-width: 0 4px 4px;
}
/* Download arrow shape */
.buttonFileDownload:after {
  width: 0;
  height: 0;
  margin-left: 6px;
  margin-top: -140px;
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: transparent;
  border-top-color: inherit;
  animation: downloadArrow 2s linear infinite;
  animation-play-state: paused;
}
.buttonFileDownload:hover:before {
  border-color: black;
}
.buttonFileDownload:hover:after {
  border-top-color: black;
  animation-play-state: running;
}
/* keyframes for the download icon anim */
@keyframes downloadArrow {
  /* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
  0% {
    margin-top: -14px;
    opacity: 1;
  }
  0.001% {
    margin-top: -30px;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    margin-top: 0;
    opacity: 0;
  }
}

<div class="buttonFileDownload_container">
  <a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
      Numbers description</a>
</div>
<div class="buttonFileDownload_container">
  <a href="#" class="buttonFileDownload"><u>Colours</u><br/>
      Colours description</a>
</div>
<div class="buttonFileDownload_container">
  <a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
      Onomatopoeia description</a>
</div>
<div class="buttonFileDownload_container">
  <a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
      Alphabet description</a>
</div>

您应该在容器中添加一个宽度，并在按钮上100％宽度：

/*File download button*/
.buttonFileDownload_container {
  text-align: center;
  margin-bottom: 20px;
  width: 400px;
}
.buttonFileDownload {
  width: 100%;
  display: inline-block;
  position: relative;
  padding: 10px 60px;
  background-color: transparent;
  border: 3px solid black;
  color: black;
  text-decoration: none!important;
  font-size: 1.5em;
  line-height: 1.2;
  text-align: center;
  text-indent: 15px;
}
.buttonFileDownload:before,
.buttonFileDownload:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 10px;
  top: 52%;
}
/* Download box shape  */
.buttonFileDownload:before {
  width: 20px;
  height: 4px;
  border-style: solid;
  border-width: 0 4px 4px;
}
/* Download arrow shape */
.buttonFileDownload:after {
  width: 0;
  height: 0;
  margin-left: 6px;
  margin-top: -140px;
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: transparent;
  border-top-color: inherit;
  animation: downloadArrow 2s linear infinite;
  animation-play-state: paused;
}
.buttonFileDownload:hover:before {
  border-color: black;
}
.buttonFileDownload:hover:after {
  border-top-color: black;
  animation-play-state: running;
}
/* keyframes for the download icon anim */
@keyframes downloadArrow {
  /* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
  0% {
    margin-top: -14px;
    opacity: 1;
  }
  0.001% {
    margin-top: -30px;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    margin-top: 0;
    opacity: 0;
  }
}

<div class="buttonFileDownload_container">
  <a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
      Numbers description</a>
</div>
<div class="buttonFileDownload_container">
  <a href="#" class="buttonFileDownload"><u>Colours</u><br/>
      Colours description</a>
</div>
<div class="buttonFileDownload_container">
  <a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
      Onomatopoeia description</a>
</div>
<div class="buttonFileDownload_container">
  <a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
      Alphabet description</a>
</div>

为什么不使用特定的1个容器，可以说200px并使按钮宽度100％？

.buttonFileDownload_container {
  width: 200px;
  text-align: center;
  margin-bottom: 20px;
}
.buttonFileDownload {
  width: 100%;
  display: inline-block;
  position: relative;
  padding: 10px 60px;
  background-color: transparent;
  border: 3px solid black;
  color: black;
  text-decoration: none!important;
  font-size: 1.5em;
  line-height: 1.2;
  text-align: center;
  text-indent: 15px;
}
    <div class="buttonFileDownload_container">
      <a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
          Numbers description</a>
      <a href="#" class="buttonFileDownload"><u>Colours</u><br/>
          Colours description</a>
      <a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
          Onomatopoeia description</a>
      <a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
          Alphabet description</a>
    </div>

/*File download button*/
.buttonFileDownload_container {
  text-align: center;
  margin-bottom: 20px;
}
.buttonFileDownload {
  display: inline-block;
  position: relative;
  padding: 10px 60px;
  background-color: transparent;
  border: 3px solid black;
  color: black;
  text-decoration: none!important;
  font-size: 1.5em;
  line-height: 1.2;
  text-align: center;
  text-indent: 15px;
  width:260px;
}
.buttonFileDownload:before,
.buttonFileDownload:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 10px;
  top: 52%;
}
/* Download box shape  */
.buttonFileDownload:before {
  width: 20px;
  height: 4px;
  border-style: solid;
  border-width: 0 4px 4px;
}
/* Download arrow shape */
.buttonFileDownload:after {
  width: 0;
  height: 0;
  margin-left: 6px;
  margin-top: -140px;
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: transparent;
  border-top-color: inherit;
  animation: downloadArrow 2s linear infinite;
  animation-play-state: paused;
}
.buttonFileDownload:hover:before {
  border-color: black;
}
.buttonFileDownload:hover:after {
  border-top-color: black;
  animation-play-state: running;
}
/* keyframes for the download icon anim */
@keyframes downloadArrow {
  /* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
  0% {
    margin-top: -14px;
    opacity: 1;
  }
  0.001% {
    margin-top: -30px;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    margin-top: 0;
    opacity: 0;
  }
}

<div class="buttonFileDownload_container">
  <a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
      Numbers description</a>
</div>
<div class="buttonFileDownload_container">
  <a href="#" class="buttonFileDownload"><u>Colours</u><br/>
      Colours description</a>
</div>
<div class="buttonFileDownload_container">
  <a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
      Onomatopoeia description</a>
</div>
<div class="buttonFileDownload_container">
  <a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
      Alphabet description</a>
</div>

制作容器。将其宽度设置为每个按钮具有所需的宽度。将所有div的宽度延伸至100％
将所有标签的宽度置于该div中的标签至100％
简单

/*File download button*/
#container {
  width: 200px;
}
#container > div {
  width:100%;
}
#container > div > a {
  width:100%;
}
.buttonFileDownload_container {
  text-align: center;
  margin-bottom: 20px;
}
.buttonFileDownload {
  display: inline-block;
  position: relative;
  padding: 10px 60px;
  background-color: transparent;
  border: 3px solid black;
  color: black;
  text-decoration: none!important;
  font-size: 1.5em;
  line-height: 1.2;
  text-align: center;
  text-indent: 15px;
}
.buttonFileDownload:before,
.buttonFileDownload:after {
  content: ' ';
  display: block;
  position: absolute;
  left: 10px;
  top: 52%;
}
/* Download box shape  */
.buttonFileDownload:before {
  width: 20px;
  height: 4px;
  border-style: solid;
  border-width: 0 4px 4px;
}
/* Download arrow shape */
.buttonFileDownload:after {
  width: 0;
  height: 0;
  margin-left: 6px;
  margin-top: -140px;
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: transparent;
  border-top-color: inherit;
  animation: downloadArrow 2s linear infinite;
  animation-play-state: paused;
}
.buttonFileDownload:hover:before {
  border-color: black;
}
.buttonFileDownload:hover:after {
  border-top-color: black;
  animation-play-state: running;
}
/* keyframes for the download icon anim */
@keyframes downloadArrow {
  /* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
  0% {
    margin-top: -14px;
    opacity: 1;
  }
  0.001% {
    margin-top: -30px;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    margin-top: 0;
    opacity: 0;
  }
}

<div id="container">
<div class="buttonFileDownload_container">
  <a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
      Numbers description</a>
</div>
<div class="buttonFileDownload_container">
  <a href="#" class="buttonFileDownload"><u>Colours</u><br/>
      Colours description</a>
</div>
<div class="buttonFileDownload_container">
  <a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
      Onomatopoeia description</a>
</div>
<div class="buttonFileDownload_container">
  <a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
      Alphabet description</a>
</div>
<div>

相关内容

最新更新

热门标签：