Html 语义ui中带标签的输入字段打断布局

我试图在语义ui中创建一个带有（右对齐）标签的输入字段。文档中显示了一个角落标签的示例，它可以正常工作（），但当我尝试使用普通标签时，它会破坏输入字段的布局

我用小提琴解释了我的企图（）

以下代码工作正常（取自文档）：它显示了一个输入字段，其右侧有一个标签，适合输入字段的布局

<div class="ui labeled input">
    <input type="text" value="#"></input>
    <div class="ui corner label"><i class="copy icon"></i></div>
</div>

我不想使用拐弯标签，因为我的场景空间不够（我想在这个标签中显示一些单位，如公里、英里等）

我将其更改为使用常规标签：

<div class="ui labeled input">
    <input type="text" value="#"></input>
    <div class="ui label"><i class="copy icon"></i></div>
</div>

正如你在小提琴上看到的，标签在新行上断开了

如何使用语义ui创建具有右对齐标签的输入字段？解释为什么这不起作用也将帮助我理解如何使用语义ui构建布局

---

谢谢。

我不太熟悉语义，但您可以保留您的corner类并覆盖正确的边框，如下所示：

.ui.action.input > .button {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

---

使用！重要的是，它应该覆盖当前样式，并且不要忘记使用特定的类选择器（因此它只影响您想要的按钮）。或者使用样式属性。

我仔细研究了一下，发现了一个使用右（或左）对齐图标而不是标签的解决方案。希望这有帮助

<div class="ui right icon input">
    <input type="text" placeholder="Copy copy copy">
    <div class="icon"><i class="copy icon"></i></div>
</div>