2つのボタンを魅力的にまとめるにはどうすればいいですか？

Question

私は手を魅惑的なものにしています。これはReactコンポーネントのスタイリングモジュールです。スタイルにしようとしているボタンが2つあります：AddとClearです。私は左にClearボタンと右にAddボタンと同じ行に2つのボタンを持ってしようとしています。私は同じ行に2つのボタンを作るのに問題があります。代わりに、ClearボタンはAddボタンの下にあります。これは私が持っているものである：それは何もしませんでした

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" 
    } 
}); 

：

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> 
); 

は、私はこのようButtonコンポーネントにdisplay: "inline"を追加してみました。次に、私は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" 
    } 
}); 

最後に、私は、Buttonコンポーネントにoverflow: "auto"を追加しようとしました：

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" 
    } 
}); 

それは同様に動作しませんでした。すべての私の試みはボタンに何もしなかった。フォーム上に均等に配置された同じ行にボタンを配置するにはどうすればよいですか？

Answer 1

は、私はそれがしばらくしているけど、多分それは、誰かが助ける：

問題が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