Question

我需要“粘合”容器中的两个链接问题是.short链接可以与.long分开包装到新行理想情况下，我希望.long的内容可以换成新行，.short被“粘贴”到.long的最后一个单词。

CSS：

.container {
    width: 300px;
}

.long, .short {
    display: inline-block;
}

HTML：

<div class="container">
    <a class="long">Here is some long text that can be wrapped to a new line</a>
    <a class="short">Short</a>
</div>

因此，我无法应用white-space: nowrap，因为.long可以换行到新行。
我无法将.short放入.long，因为它是两个不同的链接。

任何想法我该怎么做？

Answer 1

好吧，如果你只是显示它们inline，那么链接就像普通文本一样，所以长链接会换行到下一行（如果它真的很长，那么它会包裹在下一行）短篇小说将在长篇大论的最后一个词之后。无需显示inline-block

如果你想省略空格;在代码中将它们粘合在一起。像这样;

<a href>long one</a><a href>short one, no space in between</a>

Answer 2

您必须根据您的要求为.long和.sort类指定宽度，如下所示。

.container {
    width: 300px;
}

.long, .short {
    display: inline-block;
    float:left;
    width:50%;
}

<div class="container">
    <a class="long">Here is some long text that can be wrapped to a new line</a>
    <a class="short">Short</a>
</div>

Answer 3

您是否有理由将锚点指定为inline-block？如果不是 - 将它们设置为inline或完全删除display属性。默认情况下，锚点将显示为内联，就好像它是一个连续的字符串：

.container {
    width: 300px;
}

.long, .short {
    display: inline;
}

<div class="container">
    <a class="long">Here is some long text that can be wrapped to a new line</a>
    <a class="short">Short</a>
</div>

Answer 4

问题是inline-block元素会在文本周围创建一个矩形框。把你的.short课推倒......

您可以尝试以下方式：

＆＃13;

.container {
  width: 300px;
}

.wrapper {
  display: inline-block;
}

.long {
  background-color: lightgreen;
}

.short {
  background-color: yellow;
}

＆＃13;

<div class="container">
  <div class="wrapper">
    <a href="#" class="long">Here is some long text that can be wrapped to a new line</a>
    <a href="#" class="short">Short</a>
  </div>
</div>

＆＃13;

希望有所帮助

将两个内联元素粘合在一起

4 个答案: