在 CSS 中创建一个固定宽度的按钮

Create a Fixed Width Button in CSS

提问by L84

I have several buttons that have variable width and I would like them to all be a certain width. When I attempted to add width: 150px;it doesn't work. How do I create these buttons that will all have a set width?

我有几个按钮的宽度可变，我希望它们都具有一定的宽度。当我尝试添加时，width: 150px;它不起作用。我如何创建这些按钮，它们都有一个固定的宽度？

Here is a Fiddleand here is the code:

这是一个小提琴，这是代码：

HTML

HTML

<p><a class="dark_button 150px-width" href="#">Lorem</a></p>
<p><a class="dark_button 150px-width" href="#">Lorum Ipsum</a></p>
<p><a class="dark_button 150px-width" href="#">Lorum Ipsum dolor</a></p>
<p><a class="dark_button 150px-width" href="#">Lorum Ipsum dolor sit amet</a></p>

CSS

CSS

.dark_button{
  border-top: 1px solid #969696;
  background: #000000;
  background: -webkit-gradient(linear, left top, left bottom, from(#545454), to(#000000));
  background: -webkit-linear-gradient(top, #545454, #000000);
  background: -moz-linear-gradient(top, #545454, #000000);
  background: -ms-linear-gradient(top, #545454, #000000);
  background: -o-linear-gradient(top, #545454, #000000);
  padding: 5px 10px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
  box-shadow: rgba(0,0,0,1) 0 1px 0;
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
  color: #e3e3e3 !important;
  font-size: 14px;
  text-decoration: none;
  vertical-align: middle;
}
.dark_button:hover {
  border-top-color: #4f4f4f;
  background: #4f4f4f;
  color: #ccc;
  text-decoration:none;
}
.dark_button:active {
  border-top-color: #4a4a4a;
  background: #4a4a4a;
}

.150px-width{
 width: 150px;
}

回答by Sampson

Couple issues:

情侣问题：

1. The aelement is an inline element, meaning you cannot give it an explicit width.
2. Classes cannot begin with a number.

1. 该a元素是一个内联元素，这意味着你不能给它一个明确的宽度。
2. 类不能以数字开头。

You'll neeed to set your displayproperty to something like blockor inline-blockto have it respect your wishes with regards to width. Additionally, use a classname like width-150pxinstead, which solves problem number 2 above.

你需要将你的display财产设置为类似的东西，block或者inline-block让它尊重你的意愿width。此外，使用类似的类名width-150px来解决上面的问题 2。

Fiddle: http://jsfiddle.net/yQu8H/5/

小提琴：http: //jsfiddle.net/yQu8H/5/

回答by Mike D

CSS Class names cannot start with a number. You must use a letter, and the names are case-sensitive.

CSS 类名称不能以数字开头。您必须使用字母，并且名称区分大小写。

See: Which characters are valid in CSS class names/selectors?

请参阅：哪些字符在 CSS 类名/选择器中有效？

回答by Eric

The answer about the class name is correct, but only part of the solution.

关于类名的答案是正确的，但只是解决方案的一部分。

You also need to enclose the anchor element (an inline element) inside a block element (like a div) and then assign the width to the block element. So you want the "structure" styling to apply to the div and the text styling to apply to the anchor.

您还需要将锚元素（内联元素）包含在块元素（如 div）内，然后将宽度分配给块元素。因此，您希望将“结构”样式应用于 div，并将文本样式应用于锚点。

This is your fiddle with a little refactoring applied.

这是您的小提琴，应用了一些重构。

http://jsfiddle.net/gZtdZ/

http://jsfiddle.net/gZtdZ/

回答by jpruizs

You can't begin class names with numbers. Maybe that's the problem. Please check the Grammar

不能以数字开头类名。也许这就是问题所在。请检查语法