文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >css中按钮的固定长度

问css中按钮的固定长度
EN

Stack Overflow用户
提问于 2015-07-23 05:01:22
回答 1查看 523关注 0票数 1

有人能帮助我如何有一个固定的宽度所有按钮使用css。请找到相同的jsFiddle链接。我已经尽力了，但找不到线索。提前谢谢。

HTML：

代码语言：javascript
复制
<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：

代码语言：javascript
复制
/* 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。

css
html
button
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-07-23 05:09:04

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

​

代码语言：javascript
复制
/* 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;
}
代码语言：javascript
复制
<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>

​

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/31578494

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档