Question

我正在设计一个设计，假设两个锚具有相同的文本，并且如果其中一个按钮宽度发生变化，我会自动修复它们之间的间距。

我设置了一个小提琴，显示问题= http://jsfiddle.net/nopL10w6/

HTML

<div class="clear-after row">
 <a class="toggle-details">
   <span>
     Details
   </span>
</a>
<a class="button" href="#">
  Register
</a>
<a class="icon">
    <span class="hidden-label">
      X
    </span>
  </a>
<a class="icon">
    <span class="hidden-label">
     Y
    </span>
  </a>
<a class="icon">
    <span class="hidden-label">
      Z
    </span>
  </a>
</div>
<div class="clear-after row">
 <a class="toggle-details">
   <span>
     Details
   </span>
</a>
<a class="button" href="#">
  Register
</a>
<a class="icon">
    <span class="hidden-label">
      X
    </span>
  </a>
<a class="icon">
    <span class="hidden-label">
     Y
    </span>
  </a>
<a class="icon">
    <span class="hidden-label">
      Z
    </span>
  </a>
</div>
<div class="clear-after row">
 <a class="toggle-details">
   <span>
     Details
   </span>
</a>
<a class="button" href="#">
  Not Register
</a>
<a class="icon">
    <span class="hidden-label">
      X
    </span>
  </a>
<a class="icon">
    <span class="hidden-label">
     Y
    </span>
  </a>
<a class="icon">
    <span class="hidden-label">
      Z
    </span>
  </a>
</div>

CSS

.clear-after:after {
clear: both;
content: "";
display: block;
}

.row{
padding: 15px 0;
border-bottom: 2px solid #000;
}

.toggle-details {
display: block;
height: 0;
text-align: right;
margin-right: 100px;
}

.toggle-details span {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: normal;
color: #4d4d4d;
background: #b10816;
color: #ffffff;
display: inline-block;
padding: 8px 12px;
color: #b10816;
background: #e6e6e6;
}

a.button {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: normal;
color: #4d4d4d;
background: #b10816;
color: #ffffff;
display: inline-block;
padding: 8px 12px;
float: right;
}

.icon {
    margin-right: 10px;
}

请注意详情＆amp;寄存器锚点看起来很棒，而较长的“未注册”＃39;需要增加边距才能让它看起来间隔均匀。

Answer 1

在你的例子中，你是浮动一个按钮来定位它，另一个是你使用边距定位它。

如果您移除了.toggle-details页边距，而是浮动它的子跨度，则可以解决您的问题：

.toggle-details {
    /*
    display: block;
    height: 0;
    text-align: right;
    margin-right: 100px;
    */
}

.toggle-details span {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: normal;
    color: #4d4d4d;
    background: #b10816;
    color: #ffffff;
    display: inline-block;
    padding: 8px 12px;
    color: #b10816;
    background: #e6e6e6;
    float: right; /* Added */
}

a.button {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: normal;
    color: #4d4d4d;
    background: #b10816;
    color: #ffffff;
    display: inline-block;
    padding: 8px 12px;
    float: right;
    margin-right: 10px; /* Added */
}

Example

或者，如果您想调整css并创建更多标准样式，则可以简化操作。这是我做的一个例子：

.button,
a.button {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: normal;
  display: inline-block;
  padding: 8px 12px;
  color: #b10816;
  background: #e6e6e6;
  text-decoration: none;
  cursor: pointer;
}

.button.button-primary {
  background: #b10816;
  color: #ffffff;
}

.pull-right {
  float: right;
}

另外，更新你的html：

<div class="pull-right">
    <a class="toggle-details button">
        Details
    </a>
    <a class="button button-primary" href="#">
        Register
    </a>
</div>

Example

.pull-right类可用于一次性浮动所有内容，而不是单独浮动每个元素。

浮动两个锚点而不指定宽度，并且它们之间具有相等的边距/填充

1 个答案:

Example

Example