css - 对称形式

问题描述

Css 有问题。我想把这个表格设置成对称的。按钮将在 1 列中，文本字段将在 1 列中，问号也将在 1 列中。

抱歉，这里的票证结构可能不好。这是我生命中的第二个 :) 我使用 React.js + Styled 组件

const ItemText = styled.div `
    padding-top: 1%;
    text-align: center;
    display: block;

    .form-inline {  
        flex-flow: row wrap;
        align-items: center;
      }
      
      .form-inline label {
        margin: 5px 10px 5px 0;
      }

      .form-inline input {
        vertical-align: middle;
        margin: 5px 10px 5px 0;
        padding: 10px;
        background-color: #fff;
        border: 1px solid #ddd;  
      }
      
      .form-inline button {
        padding: 10px 20px;
        background-color: dodgerblue;
        border: 1px solid #ddd;
        color: white;
        cursor: pointer;
      }
      
      .form-inline button:hover {
        background-color: royalblue;
      }
      
      @media (max-width: 800px) {
        .form-inline input {
          margin: 10px 0;
        }
        
        .form-inline {
          flex-direction: column;
          align-items: stretch;
        }
      }

<ItemText>
        <div className="App">
            {
                print? <h1>{dataWhen}</h1> :null
            }
            <div className="form-inline">
                <label className="question">WHEN?</label>
                <input className="webflow-style-input" type="text" placeholder="Sem piš" onChange ={getData}/>
                <button type="submit" onClick={() => setPrint(true)}> Odeslat</button>
            </div>
        </div>
        </ItemText>

标签： cssreactjsforms

css - 对称形式

问题描述

解决方案

推荐阅读