Question

首先，我想说我在这个问题上阅读了许多类似的问题，但我无法找到并回答在我的案例中有效的问题。

我有以下html：

＆＃13;

a{
  display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333333;
white-space: nowrap;
  }

＆＃13;

<ul>
   <li>
       <a>
          <my-directive ng-click="someFunc">My text 1</my-directive>
       </a>
   </li>
   <li>
       <a ng-click="someFunc">My text 2</a>
   </li>
</ul>

＆＃13;

我的问题是第二个li工作正常，因为点击是在包含填充的元素上，但是它是元素的一部分。但是，第一个具有应用ng-click的子元素，并且元素由于填充而不具有所有li高度和宽度。

我该如何解决这个问题？保持a元素的填充很重要，但我需要我的指令来获取整个宽度和高度，包括填充。我尝试对我的指令使用负余量，但正如预期的那样，文本不再适用，而且尺寸也没有改变。

有什么建议吗？

Answer 1

我的假设是你没有将忽略的填充应用回子元素。这样，如果您没有首先应用填充，文本将被放置在原来的位置。您可以使用padding:inherit。虽然你（不幸）不能用它来应用负余量（但）。

另一点是，默认情况下，未知标记被视为display:inline。这可能会导致某些空白出现在您不希望它出现的位置，并且它也不会占据整个宽度。

a
{
  display:block;
  position:relative;
  padding:3px 20px;
  background-color:blue;
}

/* Classes might be a better idea. */
/* Used to avoid affecting elements outside of a tags. */
a > my-directive
{
  display:block;
  margin:-3px -20px;
  padding:3px 20px;
  
  background-color:red;
}

<a>
  <my-directive ng-click>My text 1</my-directive>
</a>

使用填充将子元素大小设置为父元素

1 个答案: