css - 如何使用 semantic-ui 组件设置宽度和高度输入

Question

你好，我是语义世界的新手，我想自定义默认输入高度和宽度我知道我们有预定义的语义类，如小、大、迷你，但我需要自定义高度和宽度。

在输入部分的语义文档(http://semantic-ui.com/elements/input.html)中，我们有这样的消息:

"Inputs will automatically size themselves unless you manually declare a width"

我在输入中声明了这样的宽度:

<input  width="10" type="text" value="test" placeholder="empty" readonly>

但这对我不起作用。请提供一点帮助。

Answer 1

Note: The width attribute is used only with <input type="image">. http://www.w3schools.com/tags/att_input_width.asp

这就是您的代码不起作用的原因。要使其正常工作，您可以这样做:

<input style="width:100px; height: 100px;" type="text" value="test" placeholder="empty" readonly>

或者使用 CSS 文件:

input[type="text"] {
    width: 100px;
    height: 100px;
}

您可以将 100px 更改为您想要的宽度和高度。语义 UI 不会为您设置宽度和高度，这就是为什么他们说手动声明宽度。