Question

我正在尝试创建一个固定宽度的按钮和按钮中心的文本，该按钮在主<a class="button primary-button width-150px" href="/membership-profile">Membership Profile</a> <a class="button primary-button width-150px" href="/password-reset">Password Reset</a> <a class="button primary-button width-150px" href="/test-page">Test</a> <a class="button primary-button width-150px" href="/test-page">Test</a> <a class="button primary-button width-150px" href="/test-page">Test</a>中定义，但我想为某些页面添加其他样式并保持按钮固定宽度，我试图使用CSS - width-150px来创建宽度，但这对按钮没有任何影响，任何想法

它在WordPress网站上

HTML

.width-150px{
    width: 150px;
    display: inline-block;
}

CSS

/* =08. Buttons
-------------------------------------------------------------- */

button,
.button,
input[type="reset"],
input[type="submit"],
input[type="button"] {
    background-color: #199cd8;
    background-clip: border-box;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    outline: none;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 0 20px;
    text-transform: uppercase;
    line-height: 40px;
    display: inline-block;
    zoom: 1; *display: inline;
}

/*
 * Hover
 * 1. Apply hover style also to focus state
 * 2. Remove default focus style
 * 3. Required for 'a' elements
 */

button:hover,
.button:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: #1581b2;
    color: #fff;
}

/* Active */

button:active,
.button:active,
input[type="reset"]:active,
input[type="submit"]:active,
input[type="button"]:active {
    background-color: #199cd8;   
}

/* === Differnt Colors and Sizes Of Primary and Secondary Buttons  === */


/* Featured */

.primary-button {
    background-color: #199cd8;
}

#header-button-container .primary-button,
#header-button-container .secondary-button {
    color: #fff!important;
    vertical-align: baseline;
    }

.primary-button:hover{
    background-color: #1581b2;
}   

.secondary-button {
    background-color: transparent;
    border: 1px solid #fff;
}

.secondary-button:hover{
    background-color: #199cd8;
}   

.site-header .secondary-button { color: #fff; }

/*#header-button-container .secondary-button {
    color: #000;
    border-color: #000;
    }   

.secondary-button:hover,
#header-button-container .secondary-button:hover {
    background-color: #fff;
    color: #199cd8; 
    }

#header-button-container .secondary-button:hover {
    border-color: #199cd8;
}*/


/* === Default Styles === */

.button {
    margin: 5px;
    }

.button:hover {
    color: #fff!important;
    }

这是我在style.css文件中可以找到的内容

$http.get()

编辑！使用宽度为150px的按钮可以使宽度超过150px，因此这是一个最大尺寸而不是实际尺寸，如果我减少到50我的所有按钮尺寸减小，如果我将它改为300按钮保持他们的正常大小

Answer 1

在您的css中进一步定义更具体的类。

width-150px非常具体，因此它应该落在文件的下方而不是特定的声明，例如.button和.primary-button。

至关重要的是，前面的声明应该具有相同的特异性级别，因此类也是如此（在本例中）。

理想情况下，您最终会得到：

.button {
    // very general button styles
}
.primary-button {
    // over-rides of button styles
    // specific primary button styles
}
.width-150px {
    // over-ride of width
}

从以前的选择器中删除不必要的特异性

除了使用像ID或!important这样的特定深度费用来覆盖以前的样式时，你要好得多。因此，如果您找到：#wrapper-class .button，请将.button从包装类中取出。

有些more info约specificity。 And more ...

可能值得检查文档<head>中的来源订单。 WordPress可能会在这个区域变得有点复杂，加载.width-150px的样式文件越早被后续文件覆盖的可能性越大。

Answer 2

将HTML更改为：

<a class="primary-button" href="/membership-profile">Membership Profile</a>

和CSS到：

.primary-button{
width: 150px;
display: inline-block;
}

通过这种方式，您可以使用类＆＃39; primary-button＆＃39;将样式（由CSS类提供）应用于所有HTML元素。

Answer 3

你在这里使用css有点不对劲。目的是以“语义”的方式定义类，因此它们具有意义。所以primary-button是一个非常好的类名，例如:)

你可以做两件事：添加一个类，但在你的情况下，如果我理解正确，primary-button应该根据上下文，在某些页面上，在侧边栏中看起来不同？

CSS非常适用于此：它允许您指定一般primary-button，但在另一个容器/选择器中添加primary-buttons的例外。

假设您的侧边栏div有一个类sidebar，您可以说

.sidebar .primary-button {
  width: 80px;
}

这将确保在类primary-button的元素中具有类sidebar的所有元素都具有宽度80px。例如，要确保侧边栏内的按钮较小。

它可能取决于您使用的wordpress主题，但通常body标签会根据您所在的页面获取类。因此，您可以使用body标签中的类来更改特定页面上所有按钮的外观。

Answer 4

关于标签，您必须了解的一点是它们是内联元素，因此本质上高度或宽度不会影响它们。但有两种方法可以使它尊重高度或宽度

绝对定位。
将其显示属性更改为＆＃39; inline-block＆＃39;

所以你要找的样式是这个

a{
   display: inline-block;
   width: 150px;
   text-align: center;
}

Answer 5

您可能需要指定更多的css代码，以便不会从另一个类中获取宽度：

将.button.primary-button.width-150px添加到您的css将赋予您的代码特异性，如果您的项目具有所有类按钮+ primary-button + width-150px，它将具有更高优先级以获得150px宽度。

您还应该保留.width-150px;如果你在其他地方使用这个课程。

提示：如果您的链接/按钮位于另一个标记（如li或div）或具有其他宽度值的内容中，则可能需要更改上述标记的宽度。

根据您的评论，我怀疑您的<a>标记位于宽度较高的标记内。

＆＃13;

.width-150px{
    width: 150px;
    display: inline-block;
    text-align: center;

}

.button.primary-button.width-150px{
    width: 150px;
    display: inline-block;
    text-align: center;

}

＆＃13;

<a class="button primary-button width-150px" href="/membership-profile">Membership Profile</a>
    <a class="button primary-button width-150px" href="/password-reset">Password Reset</a>
    <a class="button primary-button width-150px" href="/test-page">Test</a>
    <a class="button primary-button width-150px" href="/test-page">Test</a>

＆＃13;

Answer 6

它在这里工作。您可以添加!important来覆盖宽度。例如：width: 150px !important;

＆＃13;

.width-150px {
  width: 150px;
  display: inline-block;
  text-align: center;
  border: 1px solid #ddd;
  margin: 10px;
}

＆＃13;

   <a class="button primary-button width-150px" href="/membership-profile">Membership Profile</a>
    <a class="button primary-button width-150px" href="/password-reset">Password Reset</a>
    <a class="button primary-button width-150px" href="/test-page">Test</a>
    <a class="button primary-button width-150px" href="/test-page">Test</a>
    <a class="button primary-button width-150px" href="/test-page">Test</a>

＆＃13;

修改

如果您想避免使用!important，可以使用更复杂的选择器来覆盖样式。 E.g：

.button.primary-button.width-150px { width: 150px; display: inline-block; text-align: center; }

使用CSS为按钮添加固定宽度

6 个答案: