2013-05-16 4 views
0

Здравствуйте, я делаю колонтитула:сноска ширина литий встроенный блок

<div id="footer"> 

    <ul> 

     <li id="qualifications"> 

      <h4>Professional qualifications</h4> 

      <p>Name<br> 
       Chartered Veterinary Physiotherapist<br> 
       Chartered Physiotherapist<br> 
       BSc HONS MCSP<br> 
       Post Grad Dip (vet phys) ACPAT CAT A 
      </p> 

     </li> 

     <li id="logos"> 

      <h4>head 
      </h4> 

      <img src="/" /> 

     </li> 

     <li id="contact"> 

      <h4>Contact and referal</h4> 

      <p>Contact</p> 

      <p><a id="referal">Referal Form</a></p> 

     </li> 

    </ul> 

</div> <!---footer----> 

Я хочу футер ДИВ быть шириной 100%, так что я могу его цвет. Я хочу, чтобы ul была шириной 960 пикселей, а элементы li располагались рядом друг с другом в встроенном блоке. CSS:

#footer { 
background-color:#666666; 


#footer ul { 
    width:960px; 
    margin-left: auto ; 
    margin-right: auto ; 


} 

#footer li { 
    width: 320px; 
    display:inline-block; 
} 

Но литиево элементы постучать последний под первым двум и нечетное расстояние между þér в верхней части экрана.

Любая помощь будет замечательной!

ответ

0
reduce the number lines in professional qualification... 
reduce the width of li... 
and always use float left to solve the alignment problems 


<!--<html> 
<head> 
<link rel="stylesheet" href="so.css"/> 
</head><body> 
<div id="header"></div> 
<div id="footer"> 

    <ul> 

     <li id="qualifications"> 

      <h4>Professional qualifications</h4> 

      <p>Name<br> 
       Chartered Veterinary Physiotherapist<br> 
      </p> 

     </li> 

     <li id="logos"> 

      <h4>head 
      </h4> 

      <img src="/" /> 

     </li> 

     <li id="contact"> 

      <h4>Contact and referal</h4> 

      <p>Contact</p> 

      <p><a id="referal">Referal Form</a></p> 

     </li> 

    </ul> 

</div></body></html>--> 



#header{ 
height:80%; 
width:100%; 
} 

#footer { 
background-color:#666666; 
width:100%; 
height:20%; 
} 



#footer ul { 
    width:960px; 
    margin-left: auto ; 
    margin-right: auto ; 
height:100%; 

} 

#footer li { 
width: 300px; 
display: inline-block; 
height: 100%; 
float: left; 
} 
+0

Когда я плаваю влево, цвет фона # нижнего колонтитула/нижнего колонтитула исчезает. Как я могу вернуть его? – user1910388

Смежные вопросы