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;">