Html CSS边距：将列表与左浮动图像对齐

下面是我第一次在html+css中编写类似reddit的注释。我对css和总体结构有几个问题：

我如何让评论主体（“国王脱下帽子…”）与评论头（“内森，张贴…”）和评论尾（“回复permalink…”）对齐？我试着把利润率降到最低。评论只留了一点时间，但这并没有解决问题

我知道我对这些标签有点兴奋。哪些是多余的

是否有更好/更紧密的方法获得相同的结构 谢谢大家，内森

ps我使用方便的信息将我的投票箭头堆叠在彼此的顶部

---

---

CSS沙盒：注释
.投票{
宽度：15px；
浮动：左；
清除：左；
}
.投票给img{
显示：块；
浮动：无；
明确：两者皆有；
宽度：15px；
}
.userpic img{
宽度：60px；
}
.评论内容李{
列表样式类型：无；
边缘底部：10px；
}
.留下评论{
浮动：左；
}
.头{
左边距：10px；
}
李先生{
显示：内联；
}
img{
边界：0；
}
a{
文字装饰：无；
}


，2小时前发布


国王摘下帽子，看着它。瞬间一个巨大的
人群聚集在一起。消息像野火一样传播开来。从十几个领先的
报社、记者和摄影记者蜂拥而至
高功率单翼飞机。数以百计的储备，毫无反应
犹豫不决的一场闹剧，表现得相当迅速
无法控制不断增长的人口，但
在许多不可避免的事故非正式地发生之前
发生了

第1章-无标题（eecummings）

将剩余的p边距设置为30px怎么样

更新css，在“.comment contents li”上添加左填充，并在“.head”上删除空白

当您使用时，只需对“.comment contents li”使用填充而不是空白：

---

除非绝对必要，否则我建议不要在类上使用填充和边距。

目前没有时间做CSS（可能以后），但您应该能够通过此标记实现外观：

<div class="comment">
     <p class="user">
        <a href="#">
          <img src="http://www.gravatar.com/avatar/550deada0ac679dfc3c9103b674760af?s=128&d=identicon&r=PG" height="60" width="60">
        </a>
        <a href="#">Nathan</a>, posted 2 hours ago
        <a href="#" class="comment-collapse">[-]</a>
     </p>
     <p>The king took off his hat and looked at it. Instantly an immense
            crowd gathered. The news spread like wildfire. From a dozen leading
            dailies,reporters and cameramen came rushing to the scene pellmell in
            highpowered monoplanes. Hundreds of reserves,responding without
            hesitation to a riotcall,displayed with amazing promptness quite
            unparalleled inability to control the everincreasing multitude,but
            not before any number of unavoidable accidents had informally
            occurred.
     </p>
     <p>Chapter 1 - untitled (eecummings)</p>
  <ul class="commentTools">
    <li class="voteUp"><a href="#">vote up</a></li>    
    <li class="voteDown"><a href="#">vote down</a></li>        
    <li><a href="#">reply</a></li>
    <li><a href="#">permalink</a></li>
    <li><a href="#">offensive?</a></li>
  </ul>
</div>

---

我还没有测试过，所以可能有一些bug。如果您想解释CSS，请告诉我。

我喜欢这个，因为它看起来很简单。我在样式表中添加了“p{margin left:35px；}”，它似乎工作得很好。然而，一般来说，这（添加像素填充）是一件健壮的事情吗？这是我改变后的样子：是的。我认为这是编写HTML的最简单方法。几乎完美！下面是我修改后的样子：i46.tinypic.com/9786xw.pngSo现在注释头和注释中间都对齐了。注释尾部似乎仍然是一个问题，因为它有一个尾部列表（增加了更多的填充？）。我可以删除这个嵌套列表，它将使头部、中部和尾部对齐——这是一个好的修复方法吗？谢谢你的回答。我试过了。看起来是这样的：有些路线有点偏离了。。。但我想我能看到如何修复它。我感兴趣的是在样式表中使用“背景”来设置向上/向下投票的图像——这比在html中嵌入标记更可取吗？一般的想法是，当你想到它时，向上投票箭头的意思是“向上投票”。将文本直接放在链接中意味着这些信息对于那些出于某种原因不能使用图像的人来说同样清晰

.comment-contents li {
list-style-type: none;
margin-bottom: 10px;
padding-left: 60px;
}

.head {
margin-left:0px;
}

.comment-contents li {
list-style-type: none;
padding: 0 0 10px 60px;
}

<div class="comment">
     <p class="user">
        <a href="#">
          <img src="http://www.gravatar.com/avatar/550deada0ac679dfc3c9103b674760af?s=128&d=identicon&r=PG" height="60" width="60">
        </a>
        <a href="#">Nathan</a>, posted 2 hours ago
        <a href="#" class="comment-collapse">[-]</a>
     </p>
     <p>The king took off his hat and looked at it. Instantly an immense
            crowd gathered. The news spread like wildfire. From a dozen leading
            dailies,reporters and cameramen came rushing to the scene pellmell in
            highpowered monoplanes. Hundreds of reserves,responding without
            hesitation to a riotcall,displayed with amazing promptness quite
            unparalleled inability to control the everincreasing multitude,but
            not before any number of unavoidable accidents had informally
            occurred.
     </p>
     <p>Chapter 1 - untitled (eecummings)</p>
  <ul class="commentTools">
    <li class="voteUp"><a href="#">vote up</a></li>    
    <li class="voteDown"><a href="#">vote down</a></li>        
    <li><a href="#">reply</a></li>
    <li><a href="#">permalink</a></li>
    <li><a href="#">offensive?</a></li>
  </ul>
</div>

.comment {
   position:relative;
    padding-left:75px;
}
.comment p {

}
.comment .user img {
  float:left;
  margin-left:-60px;
}
.comment .commentTools {
    padding-left:0;
}
.comment .commentTools li {
   display:inline;
}
.comment .commentTools .voteUp, .comment .commentTools .voteDown {
   position:absolute;
   display: block;
   left:0;
}
.comment .commentTools .voteUp {
    top:0;
}
.comment .commentTools .voteDown {
    top:15px;
}
.comment .commentTools .voteUp a, .comment .commentTools .voteDown  a {
  display:block;
  width: 15px;
  height: 15px;
  text-indent:-5000em;
}
.comment .commentTools .voteUp a {
    background: url(http://www.reddit.com/static/aupgray.gif) no-repeat;
}
.comment .commentTools .voteDown a {
    background: url(http://www.reddit.com/static/adowngray.gif) no-repeat;
}