CSS 页脚 - 左手元素高于右手元素-6ren

CSS 页脚 - 左手元素高于右手元素

转载作者：行者123 更新时间：2023-11-28 10:15:50

25

4

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

这是我的页脚的样子

Logo Games Database
                                                          Home About Contact

Logo 是最左侧的图像。游戏数据库出现在文本中。两者都出现在上方约 1 行

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

Logo Games Database                                       Home About Contact

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

<!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，摆弄它，即使是负数也是如此。

我在左侧尝试了 margin-top 和 margin bottom，但就是想不通。

我什至尝试将它发布到 jsfiddle 上，但我没有成功，因为我不知道如何让该网站正常工作。

我正在使用 Bootstrap 。

感谢您的帮助。

我终于得到了要在 CSSDesk 中显示的 CSS，但我不确定我是否信任它，因为它不会呈现 Bootstrap 。无论如何，这里去

http://cssdesk.com/eL2J2

最佳答案

您不能按照目前的方式将三个列表元素包装在一个 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 页脚 - 左手元素高于右手元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24215628/

25

4

0

文章推荐： ios - 数据未出现在 View Controller 中

文章推荐： javascript - html5 视频无法在 iPad 中播放

c - 高于 32767 的短整型值
当试图在 C 中存储大于 32,767 的短整数值时，只是为了看看会发生什么，我注意到打印到屏幕上的结果是我试图存储的数字 - 65,536。例如。如果我尝试将 65,536 存储在一个短变量中，则打
Locust 95% 高于 max
有时，当我在某些情况下运行 locust 时，95% 的值大于最大值。据我了解，95% 意味着 95% 的请求花费的时间比这短。那么 Max 值怎么会小于 95%？我在这里做错了什么。我还发现只有在
macos - NSAlert 高于 NSPopover
我有一个从 NSStatusItem 显示的 NSPopover。这个 Popover 会时不时地显示 NSAlerts。问题是这些警报总是出现在弹出窗口下方，即使它们成为关键窗口。即使我拖动它，它仍
Gnuplot:具有交替偏移的数据点标签(高于/低于数据点)
我正在某个数据集中绘制几条线。几个数据点(下例中的第 13 列)是特殊的，我希望它们用圆圈标记并标记(标签在第 12 列中)。 plot "data.csv" using 0:13 with circ
android - 高于 2dp 的高度会导致按钮消失
在我下面的代码中，我有一个高度为 8dp 的白色 View 。蓝色按钮的高度为 10dp，因此理论上它应该显示。然而，事实并非如此。它只显示不在白色 View 正上方的部分。我知道这与海拔有关，但我不
iphone - MapView 高于 iOS 应用程序中的所有对象
我在 nib 文件的 View 中有一个 mapView，委托(delegate)设置为文件的所有者，导出设置为 IBOutlet MKMapView* mapView; 我遇到的问题是 map 高于
javascript 表示 4 高于 16
function getNum() { num = $('.slicesinput').val(); num2 = $('.numinput').val(); if (num
android - 高于 maxVelocity 将方向更改为对角线，解决方法
Android 的 VelocityTracker 类中的缺陷是，如果 X 方向的速度超过 maxVelocity，它会更改为等于 maxVelocity，Y 方向也相同。但是，这意味着如果我们要20
html - 响应表，试图让标题*高于*列
我们有如下表格。我正在尝试使用发现的一些技巧使其响应 here . 现在的结果是我在 iPhone 上看到了以下内容: header1 header2 etc col1 col2 etc 当我希望 h
android - 让 admob 高于 actionbarsherlock
我想在同一个 Android 应用程序中使用 AdMob 和 ActionBarSherlock，但我无法将 AdMob 放在屏幕顶部(Sherlock ActionBar 上方)。有人遇到过类似的
高于 U+FFFF 的字符的 Javascript 文字
我的 javasacript 源代码是严格的 ascii，我想表示 anger symbol在字符串文字中。这在 javascript 中可能吗？最佳答案 JavaScript 字符串实际上是 UT
javascript - 高于 VMR9 时 HTML 闪烁
我正在开发一个带有 ActiveX 的网络应用程序，该应用程序使用 FFMPEG 解码视频并使用 VMR9 呈现视频。出于某种原因，每次我尝试放置一些 HTML(即使使用 IFrame)都会导致面板闪
html - 如果 div 高于 body，则防止页面滚动
我有一个可以高于页面主体的元素“div”。我希望页面不会向下滚动。我需要一个 CSS 技巧，我不能使用 JS 来获取屏幕高度。有什么想法吗？ http://jsfiddle.net/L83aLbk4/
php - 结帐字段 - 使 billing_address_2 高于 billing_address_1
在 WooCommerce 结帐字段中，我试图在结帐表单上将 billing_address_2 设置在 billing_address_1 之上。所以不是: Street Address Apar
ios - AudioKit - 获取特定频率(高于 20kHz)的问题
我在使用 AudioKit 时遇到了一个小问题框架: ----> 我无法让 AudioKit 框架拾取高于和低于特定数量的特殊频率。 (频率低于 100Hz 和高于 20kHz) 编辑:我已经在我的
java - 发出声音的权限 - android studio api 高于 21
我正在尝试激活我的手机中的应用程序但我需要代码许可我尝试了所有这些来发出声音 android.permission.RECORD_AUDIO android.permission.CAPTURE_AU
jquery - 低于 0 时禁用按钮，高于 0 时启用
我有一个 div，其中的值是 0 标准。我有两个按钮，+ 和 - 当值为 0 时，我希望禁用我的 - 按钮，并且从它被禁用的那一刻起高于 0 我希望启用它。 if (number == 0) {
machine-learning - Keras:为什么 'accuracy' 高于 'val_acc' ？
我使用 metrics=['accuracy'] 编译了一个模型，并且我获得的值始终高于验证准确度 val_acc。例如: Epoch 19/20 53/53 [===================
html - 箭头略低于 div 边界(高于 1 px)
我这里有一个导航栏代码。当我将鼠标悬停在链接上时，一个 png 图像的小箭头应该显示在它下方的中央。下面的代码在 Firefox 和 Chrome 中运行良好，但在 IE 中，箭头稍微低于 div，因
html - 当我将智能手机翻转到横向时，响应 div 高于 100%。如何解决？
这是我的 div(父/子)HTML 代码: Arvan Tourism Explore our wonderful Albania.

首页

博学

6Ren·AI

商城

CSS 页脚 - 左手元素高于右手元素