содержание нижнего колонтитула не правильно выровнено

Question

Я использую следующий код html и css для своего нижнего колонтитула, но он не дает правильного вывода. Мне нужна одна строка слева и меню справа от нижнего колонтитула.

HTML

<div id="footer"> 
    <span style="float:left;" > Copyright 2014 © Grand Cinemas. All Rights Reserved</span> 
    <span style="float:right;"><ul> 
      <li><a href="http://localhost/cinema/home">Home</a></li> 
    <li><a href="http://localhost/cinema/home/Feedback">Feedback</a></li> 
       <li><a href="http://localhost/cinema/home/logout">Log out</a></li> 

     </ul></span></div></font> 

CSS

#footer{ 
list-style:none; 

background: white; 
width:1310px; 
height:20px; 
} 
#footer li /*Styling the li part of the menu*/ 
{ 
float:left; 

display: block; 
color: white; 

text-align:center; 
margin-left:20px; 
margin-top:0px; 
border:none; 


} 

Спасибо заранее.

Answer 1

Вы код будет работать, если отключить запас по умолчанию ul.

Добавьте к вам Css:

#footer ul { margin:0; }

Answer 2

Не уверен, что я правильно понимаю вас, но я попробую. Вам нужно будет добавить еще один элемент между левой частью нижнего колонтитула и правой частью, как центральная часть.

ИЛИ

Вы можете использовать отступы или запас на правом/левом элемент, чтобы создать расстояние между ним и левым/правым элементом.

Answer 3

Как насчет HTML:

<div id="footer"> 
    <span class="left footer-el" > Copyright 2014 © Grand Cinemas. All Rights Reserved</span> 
    <span class="right footer-el" ><ul> 
      <li><a href="http://localhost/cinema/home">Home</a></li> 
    <li><a href="http://localhost/cinema/home/Feedback">Feedback</a></li> 
       <li><a href="http://localhost/cinema/home/logout">Log out</a></li> 

     </ul></span></div></font> 

со следующим дополнением CSS:

.footer-el{ 
    width: 50%; 
    display: inline-block; 
    height: 100%; 
}