Line wrap control does not work "white-space: nowrap:"

Question

Line wrap control does not work "white-space: nowrap:"

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

I do not know where I'm going wrong, but the 5th bar of the numeric sequence does not want to line up linearly, even giving a float: left; and a "nowrap" because I want to add a lower scroll bar in the content, but only the sidebar is added if I increase the width of the main 'div' consequently there will be no line break but the bottom scroll bar is not displayed , how do I display a lower bar according to the width defined in the 'div' .menu, ??

body{background-color:#6C9;}
.menu{ overflow:auto;
  white-space: nowrap; 
  width:500px;  
  height:300px; 
}
.menu > div{ float:left; 
  height:340px; 
  margin-left:5px; 
  width:100px; 
  background-color:#FFF;
}

<div class="menu">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>


</div>

html css

asked by anonymous 04.06.2018 / 20:03

2 answers

1

use this css:

body {background-color: # 6C9;} .menu {overflow: scroll; white-space: nowrap; width: 500px;
height: 300px; } .menu > div { display: inline-block; height: 340px; margin-left: 5px; width: 100px; background-color: #FFF; }

The problem was with the float that leaves everyone on the left side.

04.06.2018 / 20:07

How can I extract values from a Javascript input, but using HTML validation Select the first and last day of the previous month

score 2 · Accepted Answer

Replace float:left with display:inline-block on internal divs

body{
    background-color:#6C9;
}
.menu { 
  overflow:auto;
  white-space: nowrap; 
  width:500px;  
  height:300px; 
}
.menu > div { 
  display: inline-block; 
  height:340px; 
  margin-left:5px; 
  width:100px; 
  background-color:#FFF;
}

<div class="menu">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>