Rails 和 Materialise CSS 图标的奇怪对齐问题答案

【问题标题】：Strange alignment issues with Rails and Materialize CSS iconsRails 和 Materialise CSS 图标的奇怪对齐问题
【发布时间】：2016-11-08 18:37:39
【问题描述】：

我在表格中使用 Materialise CSS 的图标时遇到了一个非常奇怪的问题。它们似乎没有正确对齐。

截图：（所有个人信息都模糊了。）

这是我的 Slim 模板：

.container
  h1
    | View Users
  = form_for :user, url: "/users" do |f|
    table
        tr
          th width="30px" ID
          th width="80px" User ID
          th Email Address
          th First Name
          th Last Name
          th Type
          th Notes
          th width="20px" class="material-icons" delete
          th width="20px" class="material-icons" mode-edit
        - @users.each do |i|
          tr
            td = i.id
            td = i.uid
            td = i.email
            td = i.first_name
            td = i.last_name
            td = i.user_type
            td = i.notes
            td = link_to 'delete', user_path(i), method: :delete, data: { confirm: 'Are you sure?' }, :class => "material-icons", :style => 'color: black'
            td = link_to 'mode-edit', [:edit, i], :class => "material-icons", :style => 'color: black'
            br
        tr
            td
              input type="text" value="ID" readonly="readonly"
            td
              == f.text_field :uid, :id => "uid", :placeholder => "User ID"
            td
              == f.text_field :email, :placeholder => "Email Address"
            td
              == f.text_field :first_name, :id => "fname", :placeholder => "First Name"
            td
              == f.text_field :last_name, :placeholder => "Last Name"
            td
              == f.text_field :user_type, :placeholder => "Type"
            td
              == f.text_field :notes, :placeholder => "Notes"
    .row
      .actions
        .col.s2
          a class="waves-effect waves-light btn"
            == f.submit "Add"
        .col.s7
          span
        .col.s3 align="right"
          a class="waves-effect waves-light btn" href="/users/new" Open Form

这是我的application.html.erb：

<!DOCTYPE html>
<html>
<head>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body>

<%= yield %>

</body>
</html>

请帮我解决这个非常奇怪的问题。

【问题讨论】：

看起来输入行的tds 比之前的行少。你可以尝试在那里添加两个空的tds 吗？
@MuradYusufov 我已经对其进行了一些试验，但问题仍然存在。现在就试试吧。
@MuradYusufov 什么都没做
@MuradYusufov 将图标更改为“创建”并且它起作用了

标签： html ruby-on-rails materialize slim-lang

【解决方案1】：

事实证明，我使用的图标（编辑模式）导致表格出现问题。我单独测试了它，它仍然会导致这些问题。

我解决此问题的方法是将图标从“编辑模式”更改为“创建”。这立即解决了问题。

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方留下评论。 - From Review
@Serjik 我是作者
请使用您问题上的编辑链接添加更多信息。 Post Answer 按钮应仅用于问题的完整答案。 - From Review
@VDWWD 我修好了