html - semantic-ui 中带有标签的输入字段会破坏布局

Question

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

我做了一个 fiddle 来解释我的尝试(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>

不过我不想使用带 Angular 的标签，因为我的场景没有足够的空间(我想在此标签中显示一些单位，例如公里、英里等)。

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

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

正如您在 fiddle 中看到的那样，标签在新行处中断。

如何使用 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/