CODEWITHSUNDEEP
asp.netcss
joncodo
joncodo

Reputation: 2328

How can I make all buttons on a page the same width via CSS?

I have 30 buttons of different sizes and I want to set the width of all at once through CSS. But I haven't been able to get it to work right.

[insert example of failed CSS code here]

But it doesn't work. For example, the following button doesn't follow the above rule:

[insert minimal, complete HTML example here that illustrates the issue]

Upvotes: 1

Views: 6903

Answers (4)

Nightfirecat
Nightfirecat

Reputation: 11610

If you need to do this explicitly, you can simply add the !important attribute, although this will guarantee that regardless of location or source, the width property will be overridden, so be sure that you definitely want to apply that style.

button {
    width: XXXpx !important;
}

EDIT

To make the above style only apply to one HTML page, as per your request, you can change the HTML for that page slightly, giving an id to your <body> tag, and then targeting buttons only when they appear below that id.

HTML

<body id="page_title">

CSS

#page_title button {
    width: XXXpx !important;
}

Upvotes: 4

Jordan Foreman
Jordan Foreman

Reputation: 3888

You can create a button class in your css

.button
{
    width: ____px;
}

and then in your .aspx add cssClass="button" to your ASP buttons (I assume they're asp.net controls?)

Upvotes: 2

Kowser
Kowser

Reputation: 8261

For input element

INPUT[type="submit"] {
    width: XXXpx;
}

For button

BUTTON {
    width: XXXpx;
}

Upvotes: 2

Chazbot
Chazbot

Reputation: 1890

Assuming your buttons have something unique in common (ie. they're all have the class name of "buttons"), you can just use a CSS selector to set their width property. ie. 

.buttons {
    width:100px;
}

There are a number of different selectors you can use to target them, and keep in mind you can have multiple classnames on each html element by putting a space between them. ie. <div class='nav button'></div> will respond to both the .nav and .button definitions.

Upvotes: 1

Related Questions