html - 在同一行 float 和 元素

Question

我已经阅读了所有看起来像我的问题的问题和答案，但我似乎仍然无法弄清楚为什么我的代码无法正常工作。

如果有人能帮助我，我将不胜感激。

我想要做的是让 ul 元素 float 在 p 元素之后。查看代码片段 aat:http://jsfiddle.net/Y6D6p/66/

html:

<div class="gf-sosumi">
  <p>Copyright © 2014 Van Straten Fotografie. All rights reserved.</p>
  <ul class="piped">
    <li><a href="#">Terms of Use</a></li>
    <li><a href="#">Privacy Policy</a></li>
  </ul>
 </div>

CSS:

#globalfooter .gf-sosumi p { float: left;}
#globalfooter ul.piped a { float:left; padding: 0 0 0 1.5em; margin-left: 1.5em; border-left: 1px solid #212121; }

.piped li { float: left;}
.piped a { float: left; border-left: 1px solid #212121; padding: 0 0 0 0.75em; margin-left: 0.75em; }

它会在下一行生成列表，而不是在 p 元素之后。非常感谢任何帮助。

谢谢。

Answer 1

不要将 float 用于琐碎的任务，例如将东西强制彼此相邻，使用 display:inline-block 更容易。只需将其应用于 p、ul 和 li 元素即可解决问题。

Sample updated simplified fiddle .