纯css 无有余量

Question

<form className="pure-form">
    <fieldset>
         <input ref="email" type="email" placeholder="Email" 
                  value={this.state.emailInput} 
                  onChange={this.handleChange}
                   />
         <input ref="password" type="password" placeholder="Password" 
                        value={this.state.passwordInput} 
                        onChange={this.handleChange} 
                        />

        <label htmlFor="remember">
            <input ref="remember" id="remember" type="checkbox" /> Remember me?
        </label>

        <button onClick={this.handleLoginClick} type="submit" className="pure-button pure-button-primary">Sign in</button>
    </fieldset>
</form>

我只是 copy-pasted 来自 Purecss.io 的示例表格。为什么一切都粘在一起？为什么他们没有保证金？

Answer 1

您错误地添加了类：

<form className="pure-form">

应该是

<form class="pure-form">

...等等。

<link href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" rel="stylesheet" />
<form class="pure-form">
  <fieldset>
    <input red="email" type="email" placeholder="Email" />
    <input ref="password" type="password" placeholder="Password" />

    <label htmlFor="remember">
      <input ref="remember" id="remember" type="checkbox" />Remember me?
    </label>

    <button onClick={this.handleLoginClick} type="submit" class="pure-button pure-button-primary">Sign in</button>
  </fieldset>
</form>

Answer 2

Paulie_D 是正确的，如果你想在任何 html 标签上调用任何 css class 那么你需要遵循这样的语法

<tag class="classname"></tag>

    Eg:

    <form class="pure-form">
    form elements goes here 
    </form>

纯css 无有余量

Pure css nothing has margin

css

yui-pure-css