Question

我有一个页脚代码：

<ul>
    <ul class="footer">
        <li><a href="/contact">Contact</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/help">Help</a></li>
            <ul class="right">
                <li><a href="/newsletter">Newsletter</a></li>
                <li><a href="/signin">Sign In</a></li>
                <li><a href="/terms">Terms</a></li>
            </ul>
     </ul>
</ul>

CSS：

ul {
    list-style-type: none;
    padding: 0;
    overflow: hidden;
    bottom: 0;
}

li {
    position: fixed;
    bottom: 0;
    left: 0;
}

.right li{
    position: fixed;
    bottom: 0;
    right: 0;
}

li a {
    font-family: Helvetica;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

它显示底部的代码并将它们分成中间。但它们都在角落里分组。有没有解决这个问题？（SCREENSHOT）

Answer 1

我清理了你的代码并为这个布局重新调整了一些东西。最大的问题是你有＆＃34; LI＆＃34; s＆＃34;职位：固定＆＃34;。你想在它们周围有一个包装器，它是＆＃34; position：fixed＆＃34;。我在底部包含了一个jsfiddle演示链接。

＆＃13;

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: block;
}
ul {
  list-style-type: none;
  padding: 0;
  overflow: hidden;
  width: 50%;
  float: left;
}
ul.left li {
  float: left;
  display: inline;
}
ul.right li {
  float: right;
  display: inline;
}
li a {
  font-family: Helvetica;
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

＆＃13;

<div class="footer">
  <ul class="left">
    <li><a href="/contact">Contact</a>
    </li>
    <li><a href="/about">About</a>
    </li>
    <li><a href="/help">Help</a>
    </li>
  </ul>
  <ul class="right">
    <li><a href="/newsletter">Newsletter</a>
    </li>
    <li><a href="/signin">Sign In</a>
    </li>
    <li><a href="/terms">Terms</a>
    </li>
  </ul>
</div>

＆＃13;

演示： https://jsfiddle.net/NYCguyJason/3ogsjs4t/1/

页脚元素左右分开

1 个答案: