Click here to Skip to main content
14,699,428 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I don't know why but I used a heading (h1) and then some icons and they don#t place themselves in one line. The heading is in one line and the line under the heading there are the icons.

What I have tried:

 <div id="footer">
            <h1>foot</h1>
            
            
            
            
        </div>


#footer {
clear:both;
max-height:200px;
width: 100%;
background-color: yellow;

}
#footer i {
margin: 10px;
font-size: 30px;}
Posted

1 solution

foot showed on one line because the default style contains display: block. Update that attribute to display: inline-block and you can see all items of footer in one line.

#footer {
clear:both;
max-height:200px;
width: 100%;
background-color: yellow;

}
#footer h1 {
  display: inline-block;
}
#footer i {
margin: 10px;
font-size: 30px;}
 <div id="footer">
            <h1>foot</h1>
            a
            b
            c
            d
        </div>
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900