CSS对齐表单元素答案

【问题标题】：CSS aligning form elementsCSS对齐表单元素
【发布时间】：2018-02-01 21:42:58
【问题描述】：

我正在尝试转这个：

进入这个：

这是我的html代码：

<main class="container">
    <section class="new-tweet">
        <h2>Compose Tweet</h2>
        <form method="POST" action="/tweets">
            <textarea name="text" placeholder="What are you humming about?"></textarea>
            <input type="submit" value="Tweet">
            <span class="counter">140</span>
        </form>
    </section>
</main>

这是我的 CSS

.new-tweet {
    flex-direction: column;
    display: flex;
    background-color: #ececec;
    border-radius: 5px;
    border-color: #bdbdbd;
    border-style: solid;
    border-width: 1px;
    padding: 0.5em;
}

.new-tweet h2 {
    margin-top: 0;
    border-bottom: solid #4a4747 2.2px;
}

.new-tweet input {
     width: 100px;
     float: left;
     padding: 10px 20px;
}

看起来这是一个网格有用的东西，但任何建议都将不胜感激。

【问题讨论】：

标签： css forms flexbox alignment elements

【解决方案1】：

首先，更正 HTML 并添加一个 div 以在表单中包含 <input> 和 <span>。

<div class="inside">            
    <input value="Tweet" type="submit"> 
    <span class="counter">140</span>
</div>

然后，在 CSS 中写下这个：

.form {
display:contents;
}

span {
margin-top:15px;
}

【讨论】：

【解决方案2】：

我手动更改了宽度。现在一切都好。

【讨论】：