Question

如果用户创建了一堆<ul></li>:results</li></ul>，那么这些项目符号将与其下方的<div>重叠。我们怎样才能阻止这种情况发生？你会在为时太晚之前保存<div>吗？！？ dun dun dun

index.html.erb

<!-- Default bootstrap panel contents -->

<div id="values" class="panel panel-default">
  
  <div class="panel-heading"><h4><b>AVERAGE</b></h4></div>

  <% @averaged_quantifieds.each do |averaged| %>
    <% if averaged.user == current_user %>
      <div style="float:left; width:150px;">

        <%= link_to edit_quantified_path(averaged) do %>
        <b><%= averaged.name %> (<%= averaged.metric %>)</b>
        <% end %>
        <ul>
          <% averaged.results.each do |result| %>
            <li>
              <%= result.date_value.strftime("%b.%y") %>
                &nbsp;&nbsp;
              <%= result.result_value %>
            </li>
          <% end %>
        </ul>
      </div>
    <% end %>
  <% end %>
</div>

# The line breaks only work if the User only adds a few rows, but I want to encourage the User to creates as many rows as his heart desires.
<br>
<br>
<br>
<br>

<!-- Default bootstrap panel contents -->
<div id="values" class="panel panel-default">
  
  <div class="panel-heading"><h4><b>INSTANCE</b></h4></div>

  <% @instance_quantifieds.each do |instance| %>
    <% if instance.user == current_user %> 
      <div style="float:left; width:150px;">

      <%= link_to edit_quantified_path(instance) do %>    
      <b><%= instance.name %> (<%= instance.metric %>)</b>
      <% end %>

      <ul>
        <% instance.results.each do |result| %>
        <li>
          <%= result.date_value.strftime("%b.%y") %>
           &nbsp;&nbsp;
          <%= result.result_value %>
        </li>
        <% end %>
      </ul>
    </div>
  <% end %>
  <% end %>
</div>

  <div class="values-button">
  <%= link_to new_quantified_path, class: 'btn'  do %>
  <b><span class="glyphicon glyphicon-plus"</span></b>
  <% end %>
  </div>

Answer 1

你有一个代码<div style="float:left; width:150px;">。这就是它对它下面的div过度的原因。 float样式将它从正常的dom流中取出（在dom的自然结构上方浮动是一种描述它的方式）并且它下方的div不会注意它。删除那行代码（你有两次）将解决你的问题

如何防止<ul>重叠<div>？</div> </ul>

1 个答案: