Question

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

如果有人可以帮助我，我真的很感激。

我要做的是在p元素之后浮动一个ul元素。请参阅代码段：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

Answer 2

添加此css：

.gf-sosumi p, .piped {display: inline-block;}

示例小提琴http://jsfiddle.net/Y6D6p/69/（确保打开结果窗口足够宽）

在同一行</up>上浮动一个<p>和</p> <ul>元素

2 个答案: