Member Avatar for pavankishore

Hai ,

My form has 3 buttons side by side,...each with different length of text on them...resulting in the width of buttons not being uniform..could anyone sugguest a solution ...bye the way my buttons r not images..(for images width attribute works..right?)

  • 3 Contributors
  • 4 Replies
  • 100 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by jalarie

Dani AI

Generated

There are two different goals being discussed here: making every button the same width, or letting each button size itself to its label. described the latter requirement, while tried a quick nonbreaking-space hack and correctly asked what element type is being used. The NBSP approach works only in specific cases and breaks with localization, font changes, or responsive layouts. A small, CSS-based approach is more robust.

If the goal is equal-width buttons, use a container with a flex layout and give each button the same flex so they share available space. If the goal is to size to the label, remove fixed widths, give consistent padding, and prevent wrapping so the control expands to fit the text. Also set box-sizing to border-box so padding and borders behave predictably across browsers.

Example patterns:

/* equal widths */
.btn-row { display: flex; gap: .5rem; }
.btn-row .btn { flex: 1; box-sizing: border-box; }

/* auto-width to label */
.btn { display: inline-block; padding: .4em .8em; white-space: nowrap; box-sizing: border-box; }

Troubleshooting notes: browsers apply different default padding and line-height to input vs button elements, so normalize styles if sizes are inconsistent. Use min-width in em units if you need a baseline width for short labels, and prefer class-based styles over inline styles for maintainability. For modern docs on flexbox and box-sizing see MDN: and box-sizing.

Recommended Answers

All 4 Replies

Member Avatar for tgreer

So, what are your buttons? Are they input type="button" , or are they hyperlinks styled to look like buttons?

Member Avatar for jalarie

How about:

<input type="button' value="&nbsp;&nbsp;&nbsp;short&nbsp;&nbsp;">
<input type="button' value="lllooonnnggg">
Member Avatar for pavankishore

So, what are your buttons? Are they input type="button" , or are they hyperlinks styled to look like buttons?

ya..
<input type="button" name="newButton" style="font-weight:bold" value="New Trade">
<input type="button" name="swapButton" style="font-weight:bold" value="Create Swap">
<input type="button" name="buildButton" style="font-weight:bold" value="Create Build List">
so using nbsp doesnt cater...the requirement is button shd be enough for the text on it..
i.e., the length of the button shd be according to the length of the text on it.

Member Avatar for jalarie

resulting in the width of buttons not being uniform

the requirement is button shd be enough for the text on it.. i.e., the length of the button shd be according to the length of the text on it.

These seem to contradict each other. What is it that you really want?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.