CSS仅针对评论中的第一行

Question

所以我在我的应用程序中有评论，问题是评论中的内容一旦包含在用户图片下面的三行而不是从其他行开始的地方开始。我对CSS很陌生，但似乎我应用它的任何余量只会移动第一行。

CSS：

#comment_border {
  border: 1px solid $grayLighter;
  border-radius: 3px;
  background-color: #d6e5f1;
  margin-left: 90px;
  padding: 2px;
}

.comment_info {
  display: block;
  margin-left: -20px;
  color: #767676;
}

#comment_content {
  /* dont know what to put here */
}

查看/评论：

<div class="row" id="comment_border">

<span class="comment_info">
  <aside class="span2">
    <%= link_to gravatar_for((comment.user), size: 35), comment.user %>
    <%= link_to comment.user.name, comment.user, id: "feedusername" %>
  </aside>
  <span id="comment_content"> <%= comment.content %> </span>
</span>

</div>

Answer 1

问题描述不完整（基本CSS缺失等），但主要问题似乎是你在内联元素上设置左边距。使用给定的标记，以下CSS修改以一种似乎大致意义的方式呈现它：

.comment_info {
  display: block;
  margin-left: 0px;
  color: #767676;
  /* margin-left:-20px; NOT set here */
}
#comment_content {
  margin-left: 90px;
  display: block;
}
.span2 { 
  width: 80px; 
  height: 35px; 
  float: left;
  border: solid 1px red;
 }

对评论内容使用div元素而不是span更合乎逻辑;这样做，您可以删除display: block声明。

P.S。你不应该在这里真正使用aside;它不是出于这样的目的，它只是混淆了一些旧的浏览器;请改用div。