jqueryモーダルダイアログで基本的なデザインを作ろうとしていますが、今のところ大失敗です。私はCSSが得意ではなかったので、本当に難しいようです。これまでに試したことは次のとおりです。
モーダル ボックス 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;
}
入力を並べて配置するのを手伝ってください。この問題ですでに 3 時間以上を失いました。本当に小さなものを見逃していると確信していますが、初心者としてはそれを見つけることができません.