All geek questions in one place

How to make <div> inline? All <div>, even if their total width is greater than the width of their parent?

I need to make the <div> inline visible and hide them with "overflow: hidden" for my parent.

The width for the <div> set to 20% using the "box-sizing" property, so they make up exactly 20% of their parent width.

The usual method using "float: left" does not help, because it displays only 5 <div> in one line, and the rest of them are displayed in a new line under the first 5 <div> .

How to make all <div> displayd inline and hide the rest of them if they are too wide to be displayed inside their parent using "overflow: hidden"?

I have the following document structure:

 <body> <div class="column"> <div class="header">Some text</div> <ul class="item_list"> <li class="simple"><a href="">Some text<br></a></li> <li class="simple"><a href="">Some text<br></a></li> <li class="simple"><a href="">Some text<br></a></li> ... </ul> </div>

You can see what I mean here . But I did this using javascript (set to <div> "position: absolute" and generated "margin-left" for each element), and this creates big problems for future development.

+4
source share
5 answers

DEMO: http://jsfiddle.net/marcuswhybrow/7YDfE/3/

Use display: inline-block and white-space: nowrap in combination:

 <div class="wrapper"> <div class="inline"></div> <div class="inline"></div> <div class="inline"></div> </div>

Then use the appropriate CSS:

 div.wrapper { width: 200px; /* or whatever */ overflow: hidden; white-space: nowrap; } div.inline { display: inline-block; }

The demo contains jQuery animation to illustrate the effect:

DEMO: http://jsfiddle.net/marcuswhybrow/7YDfE/3/

+10
source

If the elements are div display: inline , then use white-space: nowrap; to the parent element will prevent them from wrapping in new lines.

+1
source

Since you have a known number of divs, did you try to use absolute positioning instead of float and point to the left: 20% on the left: 40%, etc.?

0
source

If you set the size of the div container to a fixed value and specify all the internal display: inline-block elements, this should do the trick. inline-block will make each element align to the left, but retain its size, while a container with a fixed height will hide any overflow to a new line.

0
source

This will do what you want by adding the removal of a space between them, allowing beautiful code formatting. The container gets the font size: 0px ftw.

Markup

 <div class="wrapper"> <div class="inline">Some text </div> <div class="inline">Some sample text </div> <div class="inline">Some Other text </div> </div>

CSS

 div.wrapper { width: 250px; /* or whatever */ overflow: hidden; white-space: nowrap; border: 1px solid red; font-size:0px; } div.inline { display: inline-block; width: 80px; height: 20px; background-color: black; color:white; margin: 0; padding: 0; border: 1px solid blue; font-size:12px; }
0
source

Source: https://habr.com/ru/post/1336710/

More articles:


All Articles