How to set width of a inline element?
To apply width, set css property 'display' to either 'block' or 'inline-block'.
block: the element will sit in a single line. In such case you may want to set float so links are in the same line;
inline-block; the element will have height, width, etc, and multiple elements will sit in the same line (block).
Setting the width of inline elements
As others have mentioned, setting the width (or some other position-related property) of an inline element will cause the browser to then display the element as a block element.
You can explicitly declare this sort of behavior through using the CSS display
property. The most common settings are display: inline
(default), display: block
, and display: none
.
A full reference for the display
property is available here.
However, it should be noted that the HTML 4.01 specification discourages the use of "overriding the conventional interpretation of HTML elements":
Style sheets provide the means to
specify the rendering of arbitrary
elements, including whether an element
is rendered as block or inline. In
some cases, such as an inline style
for list elements, this may be
appropriate, but generally speaking,
authors are discouraged from
overriding the conventional
interpretation of HTML elements in
this way.
Why does inline-block automatically adjust its width according to it's child's width?
display: inline-block
is basically a sweet-spot between display: inline;
(which is default for span
, strong
, em
, etc.) and display: block;
(which is default for div
, p
, etc).
Inline elements are built for text and thus they should flow inline with the text, and only be as wide as the text they contain. Thus, you can't set the width of an inline
element.
Block elements are made to fill all the available width by default and are thus on their own line rather than flowing inline. This is good for things like paragraphs, but sometimes you want shorter lines so it is possible to adjust the width for block
elements.
Inline-block elements are in the middle. They flow inline like display: inline;
elements, but you can set the width like display: block;
elements.
How to set responsive width on inline elements?
You can place your button with fixed dimension inside an element with inline
attribute.
Related Topics
Why Shouldn't I Use Id Selectors in CSS
Vertically Center Image on Page and Maintain Aspect Ratio on Resize
Use Calc() Function in Makestyles
Finding "Equivalent" Color with Opacity
Can't Change CSS Style in Angularjs
How to Color Specific Cells in a Data Frame/Table in R
Bootstrap Modal Window Inside Another Div
What Are the Difference Between Col-Lg and Col-Md in Bootstrap3
Align Material Icon with Text on Materialize
How to Make Bootstrap Responsive Design Work with Dotnetnuke
What Is the Purpose of Flex-Start and Flex-End on Justify-Items and Justify-Self
Unordered List That Acts Like Grid-Auto-Flow Dense