Question

我有<span> position: absolute。旁边还有一个文字。现在我希望当该跨度的width增加时，跨度和文本之间的空间也会增加。

换句话说，我不希望Red-Color-Span封面“MyName”文字从不。怎么样？

.notification{
    position: absolute;
    background-color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class='inbox'>
    <span class='notification'></span>
    <i class="fa fa-inbox"></i>
    MyName
</span>

<br><br>
<span class='inbox'>
    <span class='notification'>23</span>
    <i class="fa fa-inbox"></i>
    MyName
</span>

<br><br>
<span class='inbox'>
    <span class='notification'>4245</span>
    <i class="fa fa-inbox"></i>
    MyName
    </span>

其实我想要这样的东西：

.notification{
    position: absolute;
    background-color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class='inbox'>
    <span class='notification'></span>
    <i class="fa fa-inbox"></i>
    MyName
</span>

<br><br>
<span class='inbox'>
    <span class='notification'>23</span>
    <i class="fa fa-inbox"></i>
    MyName
</span>

<br><br>
<span class='inbox'>
    <span class='notification'>4245</span>
    <i class="fa fa-inbox"></i>&nbsp;&nbsp;&nbsp;&nbsp;
    MyName
</span>

Answer 1

当您使用absolute进行定位时，您会从文档流中删除该元素，这意味着将从其他元素中忽略它width。您可以使用position: relative来定位元素，这将允许相邻元素通过其尺寸进行影响。的 DEMO

如果您希望icon坐在数字文本下“堆叠”，但仍然不要坐在notification文本上，那么我会重新构建您的HTML。

包裹将要堆叠在父元素div内的元素。并将其中一个包含元素定位为absolute（我建议使用较少的width，在您的示例中为i元素。

在您的示例中，您并不总是拥有notification元素，因此请务必在min-width中使用min-height和div，因为定位绝对不占空间。

<强> DEMO

div { display: inline-block; min-width: 16px; min-height: 14px; position: relative; } .notification { background-color: red; left: 0; } i { position: absolute; left: 0; }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <span class='inbox'> <div> <i class="fa fa-inbox"></i> <span class='notification'></span> </div> <span class="text">MyName</span> </span> <br> <br> <span class='inbox'> <div> <i class="fa fa-inbox"></i> <span class='notification'>23</span> </div> <span class="text">MyName</span> <br> <br> <span class='inbox'> <div> <i class="fa fa-inbox"></i> <span class='notification'>4245</span> </div> <span class="text">MyName</span> </span>

Answer 2

诀窍是不要使用绝对定位，只是因为你想要隐藏其他东西。还有其他方法可以隐藏图标，例如给它一个负的左边距，这将把它置于通知范围之下。

.notification {
  background-color: red;
  display: inline-block;
  min-width: 1em;
  position: relative;
}
.notification + i {
  margin-left: -1.25em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<span class='inbox'>
  <span class='notification'></span>
  <i class="fa fa-inbox"></i>
  MyName
</span>
<br>
<br>
<span class='inbox'>
  <span class='notification'>23</span>
  <i class="fa fa-inbox"></i>
  MyName
</span>
<br>
<br>
<span class='inbox'>
  <span class='notification'>4245</span>
  <i class="fa fa-inbox"></i>
  MyName
</span>

但请注意，这取决于图标的高/宽比。对于其他图标，您必须同时更改通知的最小宽度和图标的左边距。

如何使用绝对位置作为相对位置？

2 个答案: