HTML表格/ tr高度

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>  

我得到的是下面的输出：

这不是我想要的输出。 表格行中的“ 添加到购物车”按钮后，我不需要多余的空间。

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