0

我正在尝试在 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;
}

完整的 Jsfiddle 在这里

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

4

4 回答 4

2

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

于 2013-07-16T12:11:12.210 回答
1

更新的 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

于 2013-07-16T13:14:47.440 回答
0

在您的 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>
于 2013-07-16T12:36:11.827 回答
0

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

于 2013-07-16T12:40:20.010 回答