在语义ui中带有标签的输入字段打破了布局

Question

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

我做了一个小提琴来解释我的尝试（http://jsfiddle.net/26fqd39d/）。

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

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

我不想使用角落标签，因为我的场景没有足够的空间（我想在此标签中显示一些单位，如km，mi等）。

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

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

正如你可以在小提琴中看到的那样，标签在新行上断开。

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

感谢。

Answer 1

我玩了一下，找到了一个使用右（或左）对齐图标而不是标签的解决方法。希望这会有所帮助。

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

http://jsfiddle.net/12pjjrp7/4/

Answer 2

我对Semantic不是很熟悉，但你可以保留你的角落类并覆盖正确的边界，如下所示：

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

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