如何使用语义ui组件设置宽度和高度输入

Question

你好我是语义世界的新手，我想自定义默认的输入高度和宽度我知道我们已经预定义了语义的类，如small，big，mini但我需要有自定义的高度和宽度。

在输入部分的语义文档（http://semantic-ui.com/elements/input.html）中，我们有以下消息：

  

“输入将自动调整大小，除非您手动声明   宽度“

我在输入中声明了宽度，如下所示：

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

但它对我不起作用。请帮助。

Answer 1

  

注意：width属性仅用于<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 2

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

即可

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

Answer 3

您可以使用style属性为Semantic UI组件设置。

它期望使用以下语法：

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

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

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

Answer 4

我成功尝试了：

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

的

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