why only the first span is visible and others are hidden - css

Question

I am new to CSS so please excuse if this s basic question ,
I am trying to develop a similar User Interface as show in this picture below
This is my code
<div class="container">
<div class="marquee-sibling">Indices </div>
<div class="marquee">
<ul class="marquee-content-items">
<li><span>NASDAQ</span><br>
<span>4655.92</span>
<span>17.93</span>
<span>0.39%</span>
</li>
<li><span>DJIA</span><br>
<span>16414.39</span>
<span>15.82</span>
<span>0.1%</span>
</li>
</ul>
</div>
</div>
But could you please tell me why only the first span is visible and others are hidden ??
http://jsfiddle.net/Wf43X/319/

Answer 1

I have tried something like this..
body {
margin: 0px;
padding: 0px;
background-color: #fff;
}
.marquee {
margin: 10px;
padding: 10px;
}
span {
display: inline-block;
margin:0px;
padding:0px;
}
.container{
display: flex;
justify-content: center;
list-style-type: none;
}
.ind-cont {
background-color: #000;
width: 200px;
height: 100px;
margin: 0px;
padding:0px;
}
.txtcolor {
color: #fff;
}
.txtcolorb {
color: #aaa;
}
.ind-name {
margin: 20px;
}
.capital {
float: right;
margin: 20px;
}
.floatright {
float: right;
margin: 10px;
margin-right: 20px;
}
.one-share {
margin: 10px;
margin-left: 20px;
}
<div class="container">
<div class="marquee-sibling"> </div>
<div class="marquee">
<span class="ind-cont">
<span class="ind-name txtcolor ">NASDAQ</span>
<span Class="capital txtcolor">4655.92</span>
<span class="one-share txtcolorb">17.93</span>
<span class="per txtcolorb floatright">0.39%</span>
</span>
<span class="ind-cont">
<span class="ind-name txtcolor ">DJIA</span>
<span Class="capital txtcolor">16414.39</span>
<span class="one-share txtcolorb">15.82</span>
<span class="per txtcolorb floatright">0.1%</span>
</span>
</div>
</div>

Answer 2

You can do this with Flexbox
ul {
display: flex;
justify-content: center;
list-style-type: none;
}
li {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
background: black;
color: white;
border: 1px solid white;
paddgin: 10px;
}
li span {
flex: 50%;
padding: 5px;
box-sizing: border-box;
}
li > span:nth-child(4n+2),
li > span:nth-child(4n+4) {
text-align: right;
}
li > span:nth-child(4n+1),
li > span:nth-child(4n+2) {
font-size: 16px;
font-weight: bold;
}
li > span:nth-child(4n+3),
li > span:nth-child(4n+4) {
font-size: 14px;
color: #aaa;
}
<div class="container">
<div class="marquee-sibling">Indices </div>
<div class="marquee">
<ul class="marquee-content-items">
<li>
<span>NASDAQ</span>
<span>4655.92</span>
<span>17.93</span>
<span>0.39%</span>
</li>
<li>
<span>DJIA</span>
<span>16414.39</span>
<span>15.82</span>
<span>0.1%</span>
</li>
</ul>
</div>
</div>

Answer 3

You are breaking a line after the first span, and this code is hiding whatever is after the first line:
.container {
overflow: hidden;
height: 45px;
}

Answer 4

I also think that the flexbox ideas is the best but if you still want to stay with your code, I think you should try changing the size height of your .container in your css. you will be able to see the rest of your 'li' element. The text is in white color and you can't really see it when you run your code cause the background is white.