如何让两个按钮排列在一起，魅力四射？

问题描述：

我把我的手变成魅力十足的，这是一个React组件造型模块。我有两个按钮，我试图设计风格：Add和Clear。我正在尝试在左侧有Clear按钮和右侧有Add按钮的同一行上有两个按钮。我在制作同一行上的两个按钮时遇到了麻烦。相反，Clear按钮位于Add按钮的下方。这是我有：如何让两个按钮排列在一起，魅力四射？

import * as React from "react"; 
import glamorous from "glamorous"; 
import { CSSProperties } from "glamorous/typings/css-properties"; 
import { graphql, InjectedGraphQLProps } from "react-apollo"; 
import { reduxForm, Field, FormProps, WrappedFieldProps } from "redux-form"; 
import { ItemListQuery, AddItemMutation, AddItemMutationVariables } from "../queries/types"; 

const Form = glamorous.form({ 
    display: "flex", 
    flexFlow: "column nowrap", 
    maxWidth: 320, 
    "> *": { margin: "1 1 30px" } 
}); 

const Label = glamorous.label({ 
    display: "flex", 
    flexFlow: "column-reverse", 
    "> :first-child": { marginTop: 5 } 
}); 

const sharedInputStyles: CSSProperties = { 
    backgroundColor: "#e9e9e9", 
    border: "none", 
    borderBottom: "2px solid #e9e9e9", 
    padding: 6, 
    outline: "none", 
    transition: "all .2s ease-in", 
    ":focus": { 
    borderBottom: "2px solid #777", 
    }, 
    fontSize: 14, 
    fontWeight: 200 
}; 

const ItemInput = glamorous.input(
    sharedInputStyles, 
    { height: 24 } 
); 

const Button = glamorous.button({ 
    height: 40, 
    backgroundColor: "#bababa", 
    border: "none", 
    outline: "none", 
    ":focus": { border: "2px solid #777" }, 
    ":active": { 
    backgroundColor: "#fff", 
    border: "2px solid #dcdcdc" 
    } 
}); 

const ItemField = ({ input }: WrappedFieldProps<{}>) => (
    <ItemInput {...input} /> 
); 

export interface AddItemProps extends 
    InjectedGraphQLProps<{}>, 
    FormProps<Partial<Item>, undefined, undefined> { 
} 

const AddItem = ({ handleSubmit }: AddItemProps) => (
    <Form onSubmit={handleSubmit}> 
    <Label> 
     Name 
     <Field name="name" component={ItemField} /> 
    </Label> 
    <Button type="submit">Submit</Button> 
    <Button type="submit">Reset</Button> 
    </Form> 
);

我尝试添加display: "inline"到Button组件是这样的：

const Button = glamorous.button({ 
    height: 40, 
    backgroundColor: "#bababa", 
    display: "inline", 
    border: "none", 
    outline: "none", 
    ":focus": { border: "2px solid #777" }, 
    ":active": { 
    backgroundColor: "#fff", 
    border: "2px solid #dcdcdc" 
    } 
});

它没有做任何事情。接下来，我试图将其更改为display: "inline-block"：

const Button = glamorous.button({ 
    height: 40, 
    backgroundColor: "#bababa", 
    display: "inline-block", 
    border: "none", 
    outline: "none", 
    ":focus": { border: "2px solid #777" }, 
    ":active": { 
    backgroundColor: "#fff", 
    border: "2px solid #dcdcdc" 
    } 
});

最后，我想补充overflow: "auto"到Button组件：

const Button = glamorous.button({ 
    height: 40, 
    backgroundColor: "#bababa", 
    display: "inline-block", 
    overflow: "auto", 
    border: "none", 
    outline: "none", 
    ":focus": { border: "2px solid #777" }, 
    ":active": { 
    backgroundColor: "#fff", 
    border: "2px solid #dcdcdc" 
    } 
});

它没有正常工作。我所有的尝试都没有对按钮做任何事情。如何将按钮放在表单上均匀间隔的同一行上？

答

我知道它已经有一段时间，但也许这将帮助别人：

的问题是在Form元素。它具有柔性柱的风格，这就是为什么它把孩子放在新的路线上。如果添加按钮周围的包装，甚至一个简单的div，他们会表现为你所期望的：

const AddItem = ({ handleSubmit }) => (
    <Form onSubmit={handleSubmit}> 
    <Label> 
     Name 
     <ItemField /> 
    </Label> 
    <div> 
     <Button type="submit">Submit</Button> 
     <Button type="submit">Reset</Button> 
    </div> 
    </Form> 
);

这里有一个稍微修改后的代码片段： https://stackblitz.com/edit/react-vgnjjz

如何让两个按钮排列在一起，魅力四射？

相关推荐