css 中按钮的固定长度

Question

有人可以帮助我了解如何使用 css 为所有按钮设置固定宽度。请找到相同的 jsFiddle link。我已尽力而为，但无法获得线索。提前致谢。

HTML:

<div id="container">
<div class="button-row width">
<a href="#" class="button rounded red effect-3 width">Menu Organizer</a>
</div>

<div class="button-row">
<a href="#" class="button rounded red effect-3 width" name="menu2">Place Order</a>
</div>

<div class="button-row-submenu width">
<a href="#" class="subbutton shape-3 red effect-3">Category</a>
</div>

<div class="button-row-submenu">
<a href="#" class="subbutton shape-4 red effect-3">Building</a>
</div>

<div class="button-row">
<a href="#" class="button rounded red effect-3">User Preference</a>
</div>

<div class="button-row">
<a href="#" class="button rounded red effect-3">Ok</a>
</div>
</div>

CSS:

/* some styles */
div#container {
    width: 800px;
    margin: 50px auto;
}

div.button-row {
    margin: 20px 0;
    text-align: left;
}

/* button */
.button {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    width: 200px;
    color: #FFFFFF;
    padding: 6px 50px;
    margin: 0 20px;
    text-shadow: 2px 2px 1px #595959;
    filter: dropshadow(color=#595959, offx=1, offy=1);
    text-decoration: none;
}

/* button shapes */
.rounded {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

/* button colors */
.red {
    border: solid 1px #720000;
    background-color: #c72a2a;
    background: -moz-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
    background: -webkit-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
    background: -o-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
    background: -ms-linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e0e0e', endColorstr='#9e0e0e',GradientType=0 );
    background: linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);
    -webkit-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
    -moz-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
    box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
}

.red:hover {
    background-color: #b52f2f;
    background: -moz-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
    background: -webkit-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
    background: -o-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
    background: -ms-linear-gradient(top, #b52f2f 0% ,#910b0b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#910b0b', endColorstr='#910b0b',GradientType=0 );
    background: linear-gradient(top, #b52f2f 0% ,#910b0b 100%);
}

.red:active {
    background-color: #8f2222;
    background: -moz-linear-gradient(top, #8f2222 0%, #660808 100%);
    background: -webkit-linear-gradient(top, #8f2222 0%, #660808 100%);
    background: -o-linear-gradient(top, #8f2222 0%, #660808 100%);
    background: -ms-linear-gradient(top, #8f2222 0% ,#660808 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#660808', endColorstr='#660808',GradientType=0 );
    background: linear-gradient(top, #8f2222 0% ,#660808 100%);
}

/* button effects */
.effect-3 {
    transition: border-radius 1s;
    -webkit-transition: border-radius 1s;
    -moz-transition: border-radius 1s;
    -o-transition: border-radius 1s;
    -ms-transition: border-radius 1s;
}

.effect-3:hover {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.width{
    width: 550px;
}

有人可以帮助我如何使用 css 为所有按钮设置固定宽度。

Answer 1

您不能在内联元素上设置宽度。解决方案：给他们display:inline-block。行内块有宽度。

/* some styles */
body {
  background: url(../images/bg1.jpg) repeat;
}
div#container {
  width: 800px;
  margin: 50px auto;
}
div.button-row {
  margin: 20px 0;
  text-align: left;
}
div.button-row-submenu {
  margin: 15px 50px;
  text-align: left;
}
/* button */
.button {
  display: inline-block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: bold;
  width: 200px;
  color: #FFFFFF;
  padding: 6px 50px;
  margin: 0 20px;
  text-shadow: 2px 2px 1px #595959;
  filter: dropshadow(color=#595959, offx=1, offy=1);
  text-decoration: none;
}
.subbutton {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #FFFFFF;
  padding: 5px 30px;
  margin: 0 20px;
  text-shadow: 2px 2px 1px #595959;
  filter: dropshadow(color=#595959, offx=1, offy=1);
  text-decoration: none;
}
/* button shapes */
.rounded {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}
.shape-3 {
  -webkit-border-radius: 40px 40px 5px 5px;
  border-radius: 40px 40px 5px 5px;
  -moz-border-radius-topleft: 40px;
  -moz-border-radius-topright: 40px;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
}
.shape-4 {
  -webkit-border-radius: 5px 5px 40px 40px;
  border-radius: 5px 5px 40px 40px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomleft: 40px;
  -moz-border-radius-bottomright: 40px;
}
/* button colors */
.red {
  border: solid 1px #720000;
  background-color: #c72a2a;
  background: -moz-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
  background: -webkit-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
  background: -o-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
  background: -ms-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#9e0e0e', endColorstr='#9e0e0e', GradientType=0);
  background: linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
  -webkit-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
  -moz-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
  box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
}
.red:hover {
  background-color: #b52f2f;
  background: -moz-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
  background: -webkit-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
  background: -o-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
  background: -ms-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#910b0b', endColorstr='#910b0b', GradientType=0);
  background: linear-gradient(top, #b52f2f 0%, #910b0b 100%);
}
.red:active {
  background-color: #8f2222;
  background: -moz-linear-gradient(top, #8f2222 0%, #660808 100%);
  background: -webkit-linear-gradient(top, #8f2222 0%, #660808 100%);
  background: -o-linear-gradient(top, #8f2222 0%, #660808 100%);
  background: -ms-linear-gradient(top, #8f2222 0%, #660808 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#660808', endColorstr='#660808', GradientType=0);
  background: linear-gradient(top, #8f2222 0%, #660808 100%);
}
/* button effects */
.effect-3 {
  transition: border-radius 1s;
  -webkit-transition: border-radius 1s;
  -moz-transition: border-radius 1s;
  -o-transition: border-radius 1s;
  -ms-transition: border-radius 1s;
}
.effect-3:hover {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.width {
  width: 550px;
}

<div id="container">
  <div class="button-row width">
    <a href="#" class="button rounded red effect-3 width">Menu Organizer</a>
  </div>
  <div class="button-row">
    <a href="#" class="button rounded red effect-3 width" name="menu2">Place Order</a>
  </div>
  <div class="button-row-submenu width">
    <a href="#" class="subbutton shape-3 red effect-3">Category</a>
  </div>

  <div class="button-row-submenu">
    <a href="#" class="subbutton shape-4 red effect-3">Building</a>
  </div>

  <div class="button-row">
    <a href="#" class="button rounded red effect-3">User Preference</a>
  </div>
  <div class="button-row">
    <a href="#" class="button rounded red effect-3">Ok</a>
  </div>
</div>

css 中按钮的固定长度

Fixed length for buttons in css

html

css

button