1

我正在尝试在语义 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 构建布局。

谢谢。

4

2 回答 2

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/

于 2014-08-28T21:39:16.110 回答
-1

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

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

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

于 2014-08-26T12:55:22.900 回答