HTML5 - 按钮宽度不一样

Question

我试图让我的按钮具有相同的宽度，但由于某种原因，它不起作用。需要做些什么才能确保所有按钮都符合这些预期结果？：

1. 所有按钮的宽度必须相同
2. 所有按钮不得使用页面的整个宽度

具有相同的宽度

$(document).ready(function () {
$(".example").click(function (e) { 
    e.preventDefault();
    $.ajax({
        url: "DoSomething/",
        async: false,
        success: function (data) {
            $("#partialViewPlace").load("/Test/_Products", data);
        }
    });

});
});

/*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;
  }
}

Answer 1

  

  
1. 所有按钮的宽度必须相同
  
2. 所有按钮不得使用页面的整个宽度
  

主要技巧是在标记中添加一个包装器，一个新的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    */
}

Stack snippet

/*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>

Answer 2

＆＃34;宽度＆＃34;如果您没有设置元素的宽度，则基于内容。因此要么使所有内容相同，要么在元素上设置宽度。

Answer 3

您需要设置元素的宽度，否则根据内容的长度设置。

例如：

/*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>

Answer 4

您应该在容器上添加宽度，并在按钮上添加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>

Answer 5

为什么不使用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>

Answer 6

＆＃13;

＆＃13;

/*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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 7

制作一个容器。将其宽度设置为每个按钮所需的宽度。使其内部所有div的宽度为100％
使该div内的所有标签的宽度为100％
简单

＆＃13;

＆＃13;

/*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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;