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尝试：

function objfun = RK_solver(RK_solver_input, index)

的CSS：

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

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

1 个答案: