Question

我正在尝试创建一个CSS页脚，但遇到了一些重大问题。

这是我的页脚看起来像

Logo Games Database
                                                          Home About Contact

徽标是最左边的图像。游戏数据库显示在文本中。两者都出现在上面一行

我希望我的页脚看起来像这样

Logo Games Database                                       Home About Contact

好吧，我决定发布从浏览器收到的完整HTML输出。我删除了数据turbo链接和表格中的一堆行，因为我希望尽可能简洁。

<!DOCTYPE html>
  <html>

    <head>
      <title>Games</title
     </head>

  <body>

<header class='navbar navbar-fixed-top navbar-inverse'>
  <div class='navbar-inner'>
    <div class='container'>
      <a href="/games" id="logo">Games Database</a>
      <nav>
        <ul class='nav pull-right'>
          <li><a href="/games">Home</a></li>
          <li><a href="/help">Help</a></li>


          <li><a href="/users/38">Profile</a></li>
          <li><a href="/users/favorites">Favorites</a></li>
          <li><a data-method="delete" href="/signout" id="signout" rel="nofollow">Sign Out</a></li>

        </ul>
      </nav>
    </div>
  </div>
</header>


<h1>Games Database</h1>

<table>

<thead>
  <tr>
    <th id = 'title_id'><a class="current asc" href="/games?direction=desc&amp;sort=title">Title</a></th>
    <th id = 'console_id'><a href="/games?direction=asc&amp;sort=console">Console</a></th>
    <th id = 'genre_id'><a href="/games?direction=asc&amp;sort=genre">Genre</a></th>
    <th id = 'release_id'><a href="/games?direction=asc&amp;sort=release+date">Release Date</a></th>
  </tr>
</thead>

<tbody> 


<tr>
  <td id = 'title'>Animal Crossing</td>
  <td id = 'console'>Gamecube</td>
  <td id = 'genre'>Life Simulation</td>
  <td id = 'released_on'>2001</td>


    <div>
      <td><a href="/games/36" id="show">Show</a></td>
      <td><a href="/games/36/edit" id="edit">Edit</a></td>
      <td><a data-method="delete" href="/games/36" id="delete" rel="nofollow">Delete</a></td>
    </div>

</tr>

<tr>
  <td id = 'title'>Donkey Kong Country</td>
  <td id = 'console'>Super Nintendo</td>
  <td id = 'genre'>Platform</td>
  <td id = 'released_on'>1994</td>

    <div>
      <td><a href="/games/35" id="show">Show</a></td>
      <td><a href="/games/35/edit" id="edit">Edit</a></td>
      <td><a data-method="delete" href="/games/35" id="delete" rel="nofollow">Delete</a></td>
    </div>

</tr>

 </tbody>

</table>


<p>
  <a href="/games/new" id="submit">Add a new game</a>
</p>



<ul class = 'footer'>
<li><img alt="83ec69e47df392e6856aca4a7a276e9b" id="footer-logo" src="http://m1.behance.net/rendition/modules/59245571/disp/83ec69e47df392e6856aca4a7a276e9b.jpg" />
    <li id = "footer-left">Games Database</li>

    <div id = 'footer-center'>
      <li><a href="/games" id="links">Home</a></li>
      <li><a href="/about" id="links">About</a></li>
      <li><a href="/static_pages/contact" id="links">Contact</a></li>
    </div>

    </ul>

  </body>

</html>

这是我的CSS文件

.footer {
  display: inline-block;
  border-top: 1px solid #eaeaea;
  color: black;
  bottom: 0;
  position: fixed;

  li {
    display: inline;
  }

  #footer-center {
    float:right;
    word-spacing: 20px;
    margin-left: 980px;
    color: black;
   }

 #footer-logo {
    height: 30px;
    width: 50px;
  } 
}

#logo {
  float: left;
  padding-top: 10px;
  margin-right: 10px;
  font-size: 1.5em;
  text-transform: uppercase;
  &:hover {
  text-decoration: none;
  }
}

#links {
  color: black;
}

我已经尝试了一切。我已经尝试将页脚设置为固定，相对和绝对。我尝试将bottom属性设置为0，摆弄它，即使在底片中也是如此。

我在左侧尝试了边缘顶部和边缘底部，但是无法弄清楚这一点。

我甚至试图将它发布在jsfiddle上，但我没有运气，因为我无法弄清楚如何让该网站发挥作用。

我正在使用bootstrap。

帮助表示赞赏。

我终于在CSSDesk中显示了CSS，但我不确定我是否相信它，因为它不会渲染引导程序。无论如何，这里是

http://cssdesk.com/eL2J2

Answer 1

您无法按照当前的方式将三个列表元素包装在div中。这是一个潜在的解决方案：

- 纯CSS -

.footer { position: relative; width: 100%; overflow: auto; }
#footer-left { float: left; }
#footer-right { float: right; }
.footer ul { margin: 0; padding: 0; }
.footer li { display: inline-block; list-style-type: none; margin: 0; padding: 0; }
.footer a { color: black; }
#footer-logo { height: 30px; width: 50px; }
#game { float: right; }

- HTML -

<div class="footer">
<ul id="footer-left">
<li><img alt="83ec69e47df392e6856aca4a7a276e9b" id="footer-logo" src="http://m1.behance.net/rendition/modules/59245571/disp/83ec69e47df392e6856aca4a7a276e9b.jpg" />
<li id="game">Games Database</li>
</ul>
<ul id="footer-right">
<li><a href="/games">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/static_pages/contact">Contact</a></li>
</ul>
</div>

不知道如何在bootstrap中实现它，但这应该为您提供如何构建页脚的基本思路。

CSS页脚 - 左手物品高于右手物品

1 个答案: