css - CSS：如何将多条内容放在一个框/边框中？

Question

我试图在每个供应商周围放置一个框，在以下循环中进行交易对。

<% micropost.comments.each do |comment| %>

      <p4>
        <b>Vendor:</b>
        <%= comment.commenter %><br>
        <b>Deal:</b>
        <%= comment.body %>
      </p4>

    <% end %>

这样它在所有 [vendor:"vendor" 周围都有一个框。然后在新行下，交易：“交易”]

所以在我的css文件中我放了

p4 {
  border-style:solid;
  border-width:3px;
}

整个东西也应该缩进，所以我有，

#blah_form input, textarea, b4 {margin-left:80px}

现在它只是将 vendor 放在一个类似于 [ 然后返回一行并在其周围放置一个半盒 ] 的半盒中。

Answer 1

您需要使用非内联元素来实现您正在寻找的效果。替换（或换行<p4>）<div>

新代码：

<% micropost.comments.each do |comment| %>

  <div class="box">
    <b>Vendor:</b>
    <%= comment.commenter %><br>
    <b>Deal:</b>
    <%= comment.body %>
  </div>

<% end %>

和 CSS：

div.box {
    border: 3px solid black;
}