Rails和实现CSS图标的奇怪对齐问题

我在表中使用Materialise CSS的图标时出现了一个很奇怪的问题。他们似乎没有正确对齐。Rails和实现CSS图标的奇怪对齐问题

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

这是我修身模板：

.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="https://stackoverflow.com/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>

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

来源

2016-11-08 Dmitry Kudriavtsev

它看起来像输入行有比以前的行更少的'td'。你可以尝试在那里添加两个空的“td”吗？ –

@MuradYusufov我已经尝试了一下，但问题仍然存在。现在尝试。 –

@MuradYusufov什么都没做 –

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

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

来源

2016-11-08 19:42:37

这并没有提供一个问题的答案。要批评或要求作者澄清，请在其帖子下方留言。 - [来自评论]（/ review/low-quality-posts/14230678） – Serjik

@Serjik我是作者 –

请使用您问题上的编辑链接添加其他信息。后回答按钮应该只用于问题的完整答案。 - [来自评论]（/ review/low-quality-posts/14230678） – VDWWD

Rails和实现CSS图标的奇怪对齐问题

回答

相关问题