Question

我正在尝试在jquery模式对话框上进行基本设计，但是现在它是一个很棒的失败。我从来都不擅长CSS，对我来说似乎很难。 Hrere是我迄今为止尝试过的：

模态框HTML：

   <div class="screenSection">
        <div class="sectionHeader">
            <p>features</p>
        </div>
        <div class="lines">
           <div class="formElement">
               <label>overhaul</label>
               <input type="text" name="overhaul" data-bind="value: editName">
           </div>
           <div class="formElement">
               <label>included in the next installment</label>
               <input type="text" name="includedNI" data-bind="value: editName">
           </div>
           <div class="formElement">
               <label>first revision</label>
               <input type="text" name="firstRevision" data-bind="value: editName">
           </div>
           <div class="formElement">
               <label>last revision/ последно преразглеждане</label>
               <input type="text" name="interestFrequency" data-bind="value: editName">
           </div>
           <div class="formElement">
               <label> frequency ofcollection/</label>           
               <select name="frequencyOfCol" id="frequencyOfCol" data-bind="value: editName" style="width: 4em;">               
                    <option>1</option> 
                    <option>2</option>  
                    <option>3</option>      
                    <option>6</option>  
                </select> 
           </div>           
        </div>
    </div>

CSS：

@CHARSET "UTF-8";

.formElement { height: 30px; float: left; height: auto; margin: 0 0.4em; padding: 0 0 0.5em 0.5em; }
.formElement label { width: 17.89em; margin: 0.8em 0 0.1em 0.15em; font-size: 1.7em; display: block; }
.formElement textarea { border: 1px solid #CCCCCC; padding: 2px; font-size: 1.15em; }
.formElement span { font-size: 1.05em; font-weight: bold; }
.lines { overflow: hidden; }
#commentInformation .formElement { width: 80%; }
input[type="text"] { float: left; border: 1px solid #CCCCCC; padding: 0.2em; height: 1.6em; width: 29.4em; }
fileSelection { width: 50em; height: 30px; }
td
{
    background: #A9D0F5;
    text-align: center;
    height:2em;
}
th
{
    height:2em;
}
table
{
    width: 98%;
    font-size: 1.2em;
    clear: both;
}

Full Jsfiddle here

请帮我把输入并排放置。我已经在这个问题上失去了3个多小时。我确信我错过了一些非常小的东西，但作为初学者，我无法发现它。

Answer 1

为两个div设置相等的宽度....它们向左浮动....

Answer 2

更新了css

.formElement { height: auto; margin: 0 0.4em; padding: 0 0 0.5em 0.5em; min-width: 40%; display: inline-block;}
.formElement label { font-size: 10px; width: 100%; min-width: 150px; display: inline-block; }
.formElement textarea { border: 1px solid #CCCCCC; padding: 2px; font-size: 1.15em; }
.formElement span { font-size: 1.05em; font-weight: bold; }
.lines { overflow: hidden; }
#commentInformation .formElement { width: 80%; }
input[type="text"] { border: 1px solid #CCCCCC; padding: 0.2em; height: 15px; width: 150px }
fileSelection { width: 50em; height: 30px; }

jsfiddle

Answer 3

在CSS中删除text-align:center;并修改

<td align="center">
    <button data-bind="click: $root.editProduct">Edit</button>
</td>

到

<td align="right">
    <button data-bind="click: $root.editProduct">Edit</button>
</td>

和

<td align="center">
    <button data-bind="click: $root.removeProduct">Delete</button>
</td>

到

<td align="left">
    <button data-bind="click: $root.removeProduct">Delete</button>
</td>

Answer 4

对于要并排放置的DIVS，请给出宽度（小于50％）和浮动：向左。例如： .formElement { float:left; width:40%;}

为什么我不能并排放置2个输入

4 个答案: