Question

这似乎很基本，但是当我使用const CardToggle = ({ input, meta: { touched, error }, ...props }) => { return ( <React.Fragment> <label> <StyledInput {...input} type="radio" /> <StyledBox> <CenterElement>{props.children}</CenterElement> </StyledBox> </label> {touched && error && <span>{error}</span>} </React.Fragment> ); }; export default CardToggle; submit = (values, mutation) => { console.log('values', values); // mutation({ variables: values }); }; <styled.Form onSubmit={handleSubmit(val => this.submit(val, mutation))} > <Field name="email" label="Email" component={TextField} /> <Field name="password" label="Password" component={TextField} /> <AccountType /> </Styled.Form> <Grid> <Field name="role" component={CardToggle} value="enduser"> <UserIcon size={60} /> <Title>End User</Title> </Field> <Field name="role" component={CardToggle} value="company"> <CompanyIcon size={60} /> <Title>Company</Title> </Field> </Grid>选择器时，clear:both;在我的li标签上不起作用。

nth-child()

但是在主li{ display: block; width:100px; height: 100px; list-style-type: none; margin:1px; float: left; } li:nth-child(1){ background:#ff0000; clear:both; } li:nth-child(even){ background: #0000ff; }标签中使用时，效果很好。

li

即使在

<body>
    <li></li>
    <li></li>
</body>

上使用div时，

代码也不起作用。

Answer 1

也许是因为它仍然漂浮在左侧。

使用float:none

删除

li{
    display: block;
    width:100px;
    height: 100px;
    list-style-type: none;
    margin:1px;
    float: left;
}
li:nth-child(1){
    background:#ff0000;
    clear:both;
  float:none;
}
li:nth-child(even){
    background: #0000ff;
}

<body>
    <li></li>
    <li></li>
</body>

清除属性不适用于第n个子选择器

1 个答案: