Question

我有一个css表卡布局，它使用:before伪选择器来插入标题名称。

同样在我的表格中，我创建了一个按钮，可在按下时触发警报。

问题是该按钮在plunkr中不起作用：http://plnkr.co/edit/ZKweKp

但是当我拿出css时，按钮按预期工作。

这是css：

.cards tr:nth-of-type(odd) { 
    background: #eee; 
}

.cards th { 
    background: #333; 
    color: white; 
}
.cards td, 
.cards th {
    padding: 6px; 
    border: 1px solid #ccc; 
    text-align: left; 
}

/* Force table to not be like tables anymore */
.cards table, 
.cards thead, 
.cards tbody, 
.cards th, 
.cards td, 
.cards tr { 
    display: block; 
}

/* Hide table headers (but not display: none; for accessibility) */
.cards th {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.cards tr { border: 1px solid #ccc; }

.cards td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 20%; 
}

.cards td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
}

.cards td:nth-of-type(1):before { content: "Date"; }
.cards td:nth-of-type(2):before { content: "User"; }

html：

<!DOCTYPE html>
<html ng-app="app">

<head>

  <script data-require="angular.js@~1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="IndexController">

  <table class='cards'>
    <tr>
      <th>Color</th>
      <th>Button</th>
    </tr>
    <tr ng-repeat="color in pageData.colors">
      <td>{{ color }}</td>
      <td>
        <button ng-click="pageFn.clickMe()">Click Me</button>
      </td>
    </tr>
  </table>

</body>

</html>

和JS：

var app = angular.module('app', []);

app.controller('IndexController', function ($scope) {
  $scope.pageData ={};
  $scope.pageFn = {};

  $scope.pageData.colors = ['This is red. etc... ', 'This is green. etc...', 'Blue text here... asdfadsfadsfadsf a'];

  $scope.pageFn.clickMe = function () {
    console.log('hello');
    alert('clicked!');
  }

});

Answer 1

只需将.cards td:before的CSS更改为此

即可

.cards td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: auto; 
    padding-right: 10px; 
    white-space: nowrap;
}

width:45%更改为width:auto;，这阻止了按钮被点击。

CSS Pseudo Selector“阻止”角度Ng-Click？

1 个答案: