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圖標的奇怪對齊問題

回答

相關問題