浮动无序列表 - 适用于 jfiddle 而不是浏览器（尝试更新 chrome 和 firefox）

Question

我需要浮动一个无序列表。问题是：我做不到。我找到了一个完全符合我需要的 jfiddle（编码器制作了一个列表，使其侧面与上面的一些文本对齐）

这是更新后的 jfiddle link:

这是我为测试它而制作的文档，但它不起作用。（该列表去往其他地方，而不是它应该漂浮到的地方）

<!DOCTYPE HTML >
<html>
<head>

<style type="text/css">

 #footer-left { float:left; width:17em; border:0; border-top:1px dotted     #333; text-align:left; margin:0; padding:1.25em 0; }
.profile { width:1em; height:1em; margin-left:0.3em; }
#footer-left p { display:inline; font-size:.75em; color:#666; }
#footer-left ul { display:inline; margin:0; padding:0; float:left;}
#profiles li {  list-style:none; float:left; }

</style>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>

<div id="footer-left">
<p>E-mail me at mail@alexbrunner.com<br />or visit my profiles at <ul id="profiles">
<li><a href="http://www.facebook.com/alexbrunner" target="_blank"><img src="../images/icons/16/facebook_bw.png" class="profile" alt="Facebook" /></a></li>
<li><a href="https://plus.google.com/u/0/109422064867262895187/about" target="_blank"><img src="../images/icons/16/googleplus_bw.png" class="profile" alt="Google plus" /></a></li>
<li><a href="https://www.xing.com/profile/Alex_Brunner7" target="_blank"><img src="../images/icons/16/xing_bw.png" class="profile" alt="Xing" /></a></li>
<li><a href="http://at.linkedin.com/in/abrunner/en" target="_blank"><img src="../images/icons/16/linkedin_bw.png" class="profile" alt="Linkedin" /></a></li>
</ul></p>
</div>
</body>
</html>

ARGGG

Answer 1

这里有很多问题。

首先，当 HTML 指的是 #footer-left 时，您指的是 #footer-right。

那么您的 HTML 无效，因为段落 p 不能包含列表 ul。

然后就是删除浮点数并在其位置使用 inline-block。

 #footer-left {
   float: left;
   width: 17em;
   border: 0;
   border: 1px dotted #333;
   text-align: left;
   margin: 0;
   padding: 1.25em 0;
   overflow: auto;
 }
 .profile {
   width: 1em;
   height: 1em;
   margin-left: 0.3em;
 }
 #footer-left p {
   display: inline;
   font-size: .75em;
   color: #666;
 }
 #footer-left ul {
   display: inline-block;
   margin: 0;
   padding: 0;
 }
 #profiles li {
   list-style: none;
   display: inline-block;
 }

<div id="footer-left">
  <p>E-mail me at mail@alexbrunner.com
    <br />or visit my profiles at</p>
  <ul id="profiles">
    <li>
      <a href="http://www.facebook.com/alexbrunner" target="_blank">
        <img src="../images/icons/16/facebook_bw.png" class="profile" alt="Facebook" />
      </a>
    </li>
    <li>
      <a href="https://plus.google.com/u/0/109422064867262895187/about" target="_blank">
        <img src="../images/icons/16/googleplus_bw.png" class="profile" alt="Google plus" />
      </a>
    </li>
    <li>
      <a href="https://www.xing.com/profile/Alex_Brunner7" target="_blank">
        <img src="../images/icons/16/xing_bw.png" class="profile" alt="Xing" />
      </a>
    </li>
    <li>
      <a href="http://at.linkedin.com/in/abrunner/en" target="_blank">
        <img src="../images/icons/16/linkedin_bw.png" class="profile" alt="Linkedin" />
      </a>
    </li>
  </ul>
</div>

浮动无序列表 - 适用于 jfiddle 而不是浏览器（尝试更新 chrome 和 firefox）

Floating unordered list- works on jfiddle not in browser (tried updated chrome and firefox)

html

css

html-lists

css-float