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

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

OR

您可以在右/左元素上使用填充或边距来创建它与左/右元素之间的距离。

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

页脚内容未正确对齐

3 个答案: