Question

每当您点击链接时，我都应该使用trigger AccountTrigger on Account (before delete, before insert, before update, after delete, after insert, after update) { if (Trigger.operationType == TriggerOperation.AFTER_INSERT) { // do after insert stuff } }进行“按钮模拟”。我没有实现的是，当点击一个链接时，它会移动所有其他链接，这是因为点击后，字体大小减少了。如何在单击时增加或减少字体时阻止所有其他链接移动？

HTML：

a:active

SCSS：

<div class="links">
  <a>Google</a>
  <a>Yahoo</a>
  <a>Facebook</a>
  <a>IBM</a>
</div>

Click for fiddle

Answer 1

这是因为当您更改字体的大小时，链接的“框”也会缩小，导致右侧的其他元素相应地调整其位置。

您必须至少使用以下内容为<a>标记定义设置宽度：

.link a {
 display: inline-block;
 width: ##px;
}

您还可以使用无序列表，将链接放在列表元素中，然后为<li>

设置固定/最小宽度的样式

Answer 2

您可以使用JavaScript来实现此目的。

document.querySelectorAll('.links a').forEach(function iterateOverLinks(link) {
  // Count chars & multiply it with 12px (depends on the font family & font size)
  link.setAttribute("style", "min-width:" + (link.text.length * 12) + 'px'); 
});

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}

.links a {
  color: black;
  display: block;     /* Note    */
  float: left;        /* this    */
  text-align: center; /* changes */
  font-size: 16px;
  padding-right: 20px;
  text-decoration: none;
  cursor: pointer;
  
  &:hover {
    color: red
  }
}

.links a:active {
  font-size: 15px;
  color: green
}

<div class="links">
  <a href="#">Google</a> <!-- a-tags without href are invalid :P -->
  <a href="#">Yahoo</a>
  <a href="#">Facebook</a>
  <a href="#">IBM</a>
</div>

在不移动其他链接的情况下模拟链接点击

2 个答案: