Отображать встроенный блок не работает, второй div появляется ниже, а элемент проверки отображается как отображение: block

ДЕЙСТВИТЕЛЬНО борясь с этим кодом, это CSS, с которым я боюсь заранее, я плавал в divs влево и вправо, но веб-дизайнер на работе сказал мне использовать inline-blocks вместо% и для высоты и ширины, как раньше я использовал пиксели... что-то не так с моим "основным" div, которое не будет выравниваться горизонтально, когда я использовал функцию элемента проверки в chrome, это говорит о том, что это элемент блока, а не элемент встроенного блока. Я ничего не могу изменить !

<title> Chillblast </title>
 
 

 
 <div id="container">
 <div id="header">
 <!-- <img src="img.jpg" width="800" height="200" alt="logo" /> setting 
 image as header -->
 <h2> <u>Lorem Ipsum</u></h2>
 
 </div> 

 <div id="content">
 <div id="navi">
 <h3> <u>Navigation</u></h3>
 <ul>
 <li><a href="index.html" target="_blank">Home</a></li> <!-- creating a css class 
 called selected as this is
 the page we are on -->
 <li><a href="form.html" target="_blank"> Quote me</a></li>
 <li><a href="index.html" target="_blank"> Gallery</a></li>
 <li><a href="index.html" target="_blank">Contact us</a></li>
 </ul></div>

 <div id="main">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum urna nec nibh varius aliquam.
 Pellentesque sit amet justo lectus. Sed vehicula purus in porta fermentum. Integer malesuada non augue id sollicitudin.
 Curabitur non purus elementum, porttitor nisl nec, vestibulum mauris. Ut euismod urna tortor.
 Curabitur consequat mi eu sapien laoreet, vitae pharetra magna porttitor. Cum sociis natoque penatibus et
 magnis dis parturient montes, nascetur ridiculus mus. Aliquam et placerat massa. Fusce felis tellus, 
 gravida at convallis vitae, vestibulum eu sapien. Suspendisse sed sapien egestas, scelerisque risus ut,
 molestie dui. Etiam lacinia tellus a aliquet faucibus. </p>
 </div>
 </div> 
 <div id="footer">
 Footer Copyright © Andrew doyle
 </div>
 </div>
 
 


My CSS is as follows:


 body{
 /* dont need to call id*/
 background-color:black;
 background-repeat: no-repeat;
 font-family: lobster, baskerville, sans-serif, arial; /* set the font for the whole body,
 use back up fonts too*/
 }

 a{ /*In the same way we targeted the body tag we can target the a tag*/
 text-decoration: none; /* links not underlined*/
 color: white; /* links are coloured red*/


 }

 p{

 color:#FFFFFF;
 }

 #container{

 height: 100%;
 width: 100%;
 margin: 0 auto;
 background-image:url("spc.png"); 


 }

 h1{ /* using commas i could set it for h1,h2,h3*/
 margin:0; /* gets rid of margin*/
 }

 #header {
 width:100%;
 height:10%;
 background:transparent; /* background of div id set to blue */ /* text set to red*/
 text-align: center; /* aligns text in the header to middle of page*/
 padding: 20px;
 color: white;
 }

 /* #content{ padding-left:10px and all seperate directions or can use 
 padding: 10px 10px 10px 10px
 1st is top 2nd is right 3rd is bottom and 4th is the left and since want 
 all the same we can shorten even more and just put 10px*/

 #content {

 width: 100%;
 height: 90%;
 margin: 0 auto;
 }





 #navi{
 display: inline-block;
 width:20%;
 height:70%;
 text-align: center; /*as divs always start a new line to stop this we use float*/
 background: transparent;
 color: white;
 margin: 0 auto;

 }
 #navi ul{

 list-style-type: none; /* gets rid of the bullet points after targeting ul*/
 /*gets rid of padding */

 }




 }
 #main{ 

 display: inline-block;
 width: 80%;
 height:70%;
 background:transparent;
 margin: 0 auto; 

 }



 #main p{


 color: white; 
 }




 #footer{
 display: block;
 height: 20%;
 width: 100%; /* this is to clear of all floating elements or will not appear
 below, clearing both lets the div element get past all 
 the floating div elements*/ 
 padding: 0px;
 background: transparent;
 color: white;
 text-align: right;
 }
1 ответ

попробуйте DEMO

#navi li {
 display:inline-block;
 }

licensed under cc by-sa 3.0 with attribution.