Question

这是html.erb代码，我们必须使<li>个元素之间的空间更大。

<table width="90%", style="font-size:20px;line-height:44px;">
  <tr>
    <td width="40%" valign="top">
      <ul>
        <li><%= link_to 'Expense', SUBURI + "/authentify/view_handler?index=1" %></li>
        <li><%= link_to 'Category', SUBURI + "/authentify/view_handler?index=1" %></li>
      </ul>
    </td>
  </tr>
</table>

字体大小有效。但是line-height:44px根本不起作用。如何在html.erb中使line-height工作？感谢。

Answer 1

您需要学习CSS以及它如何控制HTML文件的外观。在这种情况下，您正在寻找更多填充。您可以在单个<li>（列表项）元素上设置填充，如下所示：

<li style="padding-bottom: 10px"></li>

或者，您可以通过CSS在所有<li>元素上设置填充：

<style>
    li { padding-bottom: 10px; }
</style>

更好 - 您可以在整个列表中设置类名，并定义填充。这样您就不会意外地将填充添加到您不想要的其他<li>：

 <style>
    ul.add-padding li {padding-bottom: 10px; }
 </style>
 <!-- later on in the HTML -->
 <ul class="add-padding">
    <li>link 1</li>
    <li>link 2</li>
 </ul>

Answer 2

<强> CSS

继@lightswitch05的回答之后，您需要了解在您的应用中加入“不显眼”的CSS的重要性。 CSS基本上只是一种在页面上设置元素样式的方法，允许您发送

CSS（cascading style sheets）可以为您的应用提供样式，但是，最好的开发人员知道CSS应该存在于外部文件中（Rails保存在asset pipeline中）

<强>内联

你目前正在这样做：

<table width="90%", style="font-size:20px;line-height:44px;">

大问题 - 您正在为页面中的各个元素设置样式。这不仅会使页面膨胀，而且会阻止可扩展性

<强>管道

正如所建议的那样，你最好这样做：

<table width="90%" class="new_table">

这意味着您可以调用以下文件：

#app/assets/stylesheets/application.css
.new_table {
     font-size:20px
     line-height:44px;
}
.new_table tr td ul {
   line-height: 44px;
}

我强烈建议您阅读如何integrate CSS with your app with the asset pipeline

如何在rails中的html.erb中使行之间的空间更大？

2 个答案: