html - 为什么这两个元素没有在一行中对齐？

Question

我正在尝试将这些输入表单对齐到一行。如果我把它们分开 - 它有效。只是想让它响应。我希望它们在桌面上排成一行，而在移动设备上将它们移动到另一行下方。我正在使用这些样式来创建表单以响应它们并且它们单独工作。但是当我在我的页面中添加其他样式时会发生冲突并且它不再起作用

/** basic default styles **/
    html { margin: 0; padding: 0; }







    span.chyron { font-size: 1.2em; padding-top: 10px; }

    /** main blocks **/
    #container {
        display: block;
        max-width: 800px;
        margin: 0 auto;
        margin-top: 5px;
        margin-bottom: 66px;
        padding: 20px 15px;
        background: #fff;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    td {
        width: 60%;
    }


    /** the form elements **/
    #hongkiat-form { box-sizing: border-box; }

    #hongkiat-form .txtinput {
        display: block;
        font-family: "Helvetica Neue", Arial, sans-serif;
        border-style: solid;
        border-width: 1px;
        border-color: #dedede;
        margin-bottom: 20px;
        font-size: 1.55em;
        padding: 11px 25px;
        padding-left: 55px;
        width: 90%;
        color: #777;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
        transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
        -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
        -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
        -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    }

    #hongkiat-form .txtinput:focus {
        color: #333;
        border-color: rgba(41, 92, 161, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
        outline: 0 none;
    }

    #hongkiat-form input#name {
        background: #fff url('images/user.png') 5px 4px no-repeat;
    }
    #hongkiat-form input#email {
        background: #fff url('images/email.png') 5px 4px no-repeat;
    }
    #hongkiat-form input#website {
        background: #fff url('images/website.png') 5px 4px no-repeat;
    }
    #hongkiat-form input#telephone {
        background: #fff url('images/phone.png') 5px 4px no-repeat;
    }

    #hongkiat-form textarea {
        display: block;
        font-family: "Helvetica Neue", Arial, sans-serif;
        border-style: solid;
        border-width: 1px;
        border-color: #dedede;
        margin-bottom: 15px;
        font-size: 1.5em;
        padding: 11px 25px;
        padding-left: 55px;
        width: 90%;
        height: 180px;
        color: #777;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
        transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
        -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
        -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
        -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    }
    #hongkiat-form textarea:focus {
        color: #333;
        border-color: rgba(41, 92, 161, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
        outline: 0 none;
    }


    #hongkiat-form #slider { width: 70%; }

    #hongkiat-form #aligned {
        box-sizing: border-box;
        float: left;
        width: 300px;
        margin-right: 50px;
    }
    #hongkiat-form #aside {
        float: left;
        width: 400px;
        padding: 0;
        box-sizing: border-box;
    }

    #wrapping { width: 100%; box-sizing: border-box; }

    span.radiobadge { display: block; margin-bottom: 8px; }
    span.radiobadge label { font-size: 1.2em; padding-bottom: 4px; }





    /** @group clearfix **/
    .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
    .clearfix { display: inline-block; }

    html[xmlns] .clearfix { display: block; }
    * html .clearfix { height: 1%; }

这是一个 jsfiddle:

jsFiddle

谢谢!

Answer 1

用 flexbox 试试:

<div class="container">
  <div class="form1 flex-item">
  form
  </div>
  <div class="form2 flex-item">
  form2
  </div>
</div>

CSS:

.container{
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.flex-item{
  width: 50%;

  @media (max-width: 600px){
   width: 100%;
  }
}