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

发布于 2024-08-15 15:53:49 字数 3517 浏览 6 评论 0原文

以下是我第一次用 html+css 编写类似 reddit 的评论。我有一些关于 css 和一般结构的问题：

如何让评论正文（“国王脱下帽子......”）与评论头（“内森，发布......”）和评论尾部（“回复永久链接......”）？我尝试将 .comment-left 的 margin-bottom 延长一点，但这并没有解决问题。
我知道我对这些标签有点兴奋。哪些是多余的？
有没有更好/更严格的方法来获得相同的结构？

谢谢大家，内森

ps 我使用了方便的信息此处用于将我的投票箭头堆叠在一起。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>CSS sandbox: comments</title>

    <style type="text/css">

      .vote {
        width: 15px;        
        float: left;
        clear: left;      
      }
      .vote img {
        display: block;
        float: none;
        clear: both;
        width: 15px;
      }
      .userpic img {
        width: 60px;
      }
      .comment-contents li {
        list-style-type: none;
        margin-bottom: 10px;
      }
      .comment-left {
        float: left;
      }
      .head {
        margin-left:10px;
      }
      .tail-list li {
        display: inline;
      }
      img {
        border: 0;
      }
      a {
        text-decoration: none;
      }
    </style>
  </head>

  <body>
    <div class="comment">
       <span class="comment-left">
        <span class="vote">
          <a href="#"><img alt="^" title="vote up" src="http://www.reddit.com/static/aupgray.gif"></a>
          <a href="#"><img alt="v" title="vote down" src="http://www.reddit.com/static/adowngray.gif"></a>
        </span>
        <span class="userpic">
          <a href="#">
          <img src="http://www.gravatar.com/avatar/550deada0ac679dfc3c9103b674760af?s=128&d=identicon&r=PG" height="60" width="60">
          </a>
        </span>
       </span>

       <span class="comment-main">
        <ul class="comment-contents">
          <li class="head">
           <a href="#">Nathan</a>, posted 2 hours ago
           <a href="#" class="comment-collapse">[-]</a>
          </li>
          <li class="middle">
            <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>
          </li>
          <li class="tail">
           <ul class="tail-list">
            <li><a href="#">reply</a></li>
            <li><a href="#">permalink</a></li>
            <li><a href="#">offensive?</a></li>
           </ul>
          </li>
        </ul>
      </span>
    </div>
  </body>
</html>

原文

The following is my first cut at coding-up a reddit-like comment in html+css. I have a few questions about css and the general structure:

How do I get the comment body ("The King took off his hat...") to align with the comment head ("Nathan, posted...") and the comment tail ("reply permalink ...")? I tried making the margin-bottom for .comment-left a little longer but that didn't fix the issue.
I know I've been a little trigger-happy with the tags. Which ones are redundant?
Is there a better/tighter way to get the same structure?

Thanks all, Nathan

ps I used the handy information here for stacking my voting arrows on top of each other.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>CSS sandbox: comments</title>

    <style type="text/css">

      .vote {
        width: 15px;        
        float: left;
        clear: left;      
      }
      .vote img {
        display: block;
        float: none;
        clear: both;
        width: 15px;
      }
      .userpic img {
        width: 60px;
      }
      .comment-contents li {
        list-style-type: none;
        margin-bottom: 10px;
      }
      .comment-left {
        float: left;
      }
      .head {
        margin-left:10px;
      }
      .tail-list li {
        display: inline;
      }
      img {
        border: 0;
      }
      a {
        text-decoration: none;
      }
    </style>
  </head>

  <body>
    <div class="comment">
       <span class="comment-left">
        <span class="vote">
          <a href="#"><img alt="^" title="vote up" src="http://www.reddit.com/static/aupgray.gif"></a>
          <a href="#"><img alt="v" title="vote down" src="http://www.reddit.com/static/adowngray.gif"></a>
        </span>
        <span class="userpic">
          <a href="#">
          <img src="http://www.gravatar.com/avatar/550deada0ac679dfc3c9103b674760af?s=128&d=identicon&r=PG" height="60" width="60">
          </a>
        </span>
       </span>

       <span class="comment-main">
        <ul class="comment-contents">
          <li class="head">
           <a href="#">Nathan</a>, posted 2 hours ago
           <a href="#" class="comment-collapse">[-]</a>
          </li>
          <li class="middle">
            <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>
          </li>
          <li class="tail">
           <ul class="tail-list">
            <li><a href="#">reply</a></li>
            <li><a href="#">permalink</a></li>
            <li><a href="#">offensive?</a></li>
           </ul>
          </li>
        </ul>
      </span>
    </div>
  </body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小巷里的女流氓 2024-08-22 15:53:49

使用“.comment-contents li”上的左侧填充更新您的CSS，并删除“.head”上的边距

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

.head {
margin-left:0px;
}

当您使用它时，只需使用“.comment-contents li”的填充而不是边距：

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

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

Update your css with a left padding on ".comment-contents li" and a remove the margin on ".head"

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

.head {
margin-left:0px;
}

While you are at it, just use padding instead of margin for ".comment-contents li":

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

I recommend not using padding and margin on a class unless absolutly necessary.

回复收藏 0 原文

北方。的韩爷 2024-08-22 15:53:49

目前没有时间做 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>

并且 CSS

.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;
}

我还没有对此进行测试，因此可能存在一些错误。如果您需要任何 CSS 解释，请告诉我。

Don't have time to do CSS at the moment (maybe later), but you should be able to achieve the look with this markup:

<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>

And the CSS

.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;
}

I haven't tested this so there may be some bugs. Let me know if youwant any of the CSS explained.

回复收藏 0 原文