Question

我正在尝试修复HTML表格行的高度。以下是我正在使用的代码：

<div data-role="page">
      <div class="pageTitle">
      <h1>Products</h1>
      </div>

      <div class="toolbar">
        <div class="leftItem backButton">
          <a class="slide" href="<%= url_for :action => :back_to_index %>">Back</a>
        </div>

        <div class="rightItem blueButton" >
          <a href="<%= url_for :controller => :Shippingaddress, :action => :new %>">Check Out</a>
        </div>
      </div>

      <div class="content">

      <ul>
         <% for i in 0..($products.length - 1)  %>
           <li>
              <form method="POST" action="<%= url_for :action => :postAsynchttp %>">
                  <table style="height:20px">
                      <tr>
                      <td style="height:20px; width:80px">    
                          <a href="<%= url_for :action => :productDetails, :id=> $products[i.to_s] %>">
                          <span class="title"><%= $products[i.to_s] %></span>
                          </a>
                      </td>    
                      <td width='40'>       
                          <input type="submit" value="Add to Cart"/>                        
                      </td>
                      </tr>
                  </table>           
              </form>
          </li>
         <% end %>
        </ul>

      </div>
</div>

我得到的只是下面的输出：

enter image description here

这不是我想要的输出。在表格行中添加到购物车按钮后，我不需要额外的空间。

Answer 1

您需要设置li的高度而不是Table / tr / td

要在CSS中执行此操作：

ul li {height: 20px;}

要在现有的html中执行此操作：

<li style="height: 20px;">

Answer 2

另外，除了我的第一个答案，在我看了一会儿之后，我想你甚至需要你的列表项在表中，我想知道这是否增加了额外的空格。尝试使用此代码代替您当前的代码，我删除了表格并手动间隔您的产品链接和按钮。我认为这应该适合你。

<div data-role="page">
  <div class="pageTitle">
  <h1>Products</h1>
  </div>

  <div class="toolbar">
    <div class="leftItem backButton">
      <a class="slide" href="<%= url_for :action => :back_to_index %>">Back</a>
    </div>

    <div class="rightItem blueButton" >
      <a href="<%= url_for :controller => :Shippingaddress, :action => :new %>">Check Out</a>
    </div>
  </div>

  <div class="content">

  <ul>
     <% for i in 0..($products.length - 1)  %>
       <li>
          <form method="POST" action="<%= url_for :action => :postAsynchttp %>">   
                      <a href="<%= url_for :action => :productDetails, :id=> $products[i.to_s] %>">
                      <span class="title"><%= $products[i.to_s] %></span>
                      </a>
                  &nbsp;
                      <input type="submit" value="Add to Cart"/>                        
          </form>
      </li>
     <% end %>
    </ul>

  </div>
</div>

Answer 3

请尝试增加以下代码的宽度。

（尝试将其增加为100％＆gt;

Html表/ tr高度

3 个答案: