页脚内容没有正确对齐

我对页脚使用了下面的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; 


}

在此先感谢。

来源

2014-01-25 user3142334

它看起来不错对我来说，菜单左侧 – amaro

同样在这里的权利和线路。看起来很好。 –

是的，但他们不在同一行 – user3142334

您的代码将工作，如果你禁用ul默认保证金。

一下添加到您的CSS：

#footer ul { margin:0; }

来源

2014-01-25 01:16:38 TLindig

是的，它工作......谢谢！ – user3142334

不知道我是否理解你，但我会尝试。您需要在页脚的左侧部分和右侧部分之间添加另一个元素，例如中间部分。

您可以使用填充或保证金左/右元素上它和左/右元素之间创建距离。

来源

2014-01-25 00:27:19

好吧，我会尝试谢谢 – user3142334

如何 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%; 
}

来源

2014-01-25 00:29:34 nike4613

不工作，菜单显示在同一行。 – user3142334

这不是你想要的吗？ – nike4613

页脚内容没有正确对齐

回答

相关问题