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

您只需将其放入自定义 css 文件中即可

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

Answer 2

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 不会为您设置宽度和高度，这就是为什么他们说 手动声明宽度 。

Answer 3

我尝试成功了：

style={{minWidth:"10em"}}

为了

<Form.Field width={3}><Select placeholder='Options' options={options} 
    style={{minWidth:"10em"}}/></Form.Field>

Answer 4

您可以使用样式属性.

为语义 UI 组件设置

它需要以下语法：

<Input style={{marginRight: spacing  'em'}}

在您的示例中，您应该指定：

<Input style={{width: 100, height: 100}}

How to set width and height input with semantic-ui components