将标签与左上方的输入表单对齐

时间：2019-03-06 01:42:13

标签： html css

我要做的是将标签对齐在左上角的表格框和标签旁边的单选按钮。所以看起来更干净。我已经弄乱了CSS，但仍然无法正确处理。

这是我正在使用的 CSS ：

input{
        width:190px;
        border:1px solid #ccc;
}
select{
        width:190px;
        border:1px solid #ccc;
}

enter image description here

https://jsfiddle.net/4tdcbvkg/1/

2 个答案:

答案 0 :(得分：2)

我对您的CSS做了一些改进：

input[type="text"]{
    width:190px;
    border:1px solid #ccc;
}
select{
    width:190px;
    border:1px solid #ccc;
}
label{
  display: block;
}
td{
  padding-bottom: 0;
  vertical-align: bottom;
}

答案 1 :(得分：1)

您可以通过添加一些CSS来实现此目的：

input {
  width: 190px;
  border: 1px solid #ccc;
}

select {
  width: 190px;
  border: 1px solid #ccc;
}

td {
  vertical-align: bottom;
}

input[type="radio"] {
  width: auto;
  display: inline-block;
  vertical-align: bottom;
}
<table cellpadding="8" class="begoneee" width="100%">
  <tr>
    <td class="begoneee"> <span class="merah">*</span> Project ID</td>
    <td class="begoneee"> <span class="merah">*</span>Project Name</td>
    <td class="begoneee">Category</td>
    <td class="begoneee">Project Status</td>
    <td><label>Project Type:</label><br/>
      <input type="radio" name="input3" onclick="streamverify(0)">Upstream<br/>
      <input type="radio" name="input3" onclick="streamverify(1)">Downstream<br/>

    </td>
  </tr>
  <tr>
    <td class="begoneee"><input type="text" id="proj_id" style="background-color:#f2f2f2" readonly></td>
    <td class="begoneee"><input type="text" id="proj_name"></td>
    <td class="begoneee">
      <select id="category">
			        <option value="blank"> </option>
					<option value="pcd">PCD</option>
					<option value="ons">Onshore</option>
					<option value="offs">Offshore</option>
					<option value="fip">FIP</option>
			</select></td>
    <td class="begoneee">
      <select id="proj_status">
			        <option value="blank"> </option>
					<option value="inpg">In Progress</option>
					<option value="comp">Completed</option>
					<option value="canc">Cancelled</option>
					<option value="oh">On Hold</option>
					<option value="exo">Expense Off</option>
					<option value="op">Open</option>
					<option value="arc">Archived</option></td>
    </tr>
	
	<tr>
        <td class="begoneee">Region</td>
        <td class="begoneee">OPU</td>
		<td class="begoneee">Operator/Asset owner</td>
		<td class="begoneee">Project Status</td>
		<td class="begoneee">Project Phase/Delivery</td>
		<td class="begoneee">Project Start Date</td>
        <td class="begoneee">Project End Date</td>

	
    </tr>
	
	    <tr>
        <td class="begoneee">
		<select id="region" >
			        <option value="blank"> </option>
					<option value="jda">Joint Development Area</option>
					<option value="pm">Pen 2332EDQWSWACF</option>
					<option value="sbh">Sabah</option>
					<option value="srwk">sarawak</option>
					<option value="na">N/A</option>
			</select></td>
    <td class="begoneee">
      <select id="opu">
			        <option value="blank"> </option>
					<option value="pchemical_g">APDAOCIJCMICAC Chemicals Group</option>
					<option value="asean">Asean Bintulu Fertiliser Sdn Bhd</option>
					<option value="fertilizer">APDAOCIJCMICAC Chemicals Fertilizer Kedah  Sdn Bhd</option>
					<option value="pchemical_m">APDAOCIJCMICAC Chemicals Marketing (LABUAN) Ltd  </option>
					<option value="pmetha">APDAOCIJCMICAC Chemicals Methanol Sdn Bhd</option>
					<option value="pmtbe">APDAOCIJCMICAC Chemicals MTBE Sdn Bhd</option>
					<option value="pmp">Polypropylene (M) Sdn Bhd</option>
					<option value="pchemical_e">APDAOCIJCMICAC Chemicals Ethylene Sdn Bhd</option>
					<option value="kertih">Kertih Port Sdn. Bhd</option>
					<option value="aromatic"> Aromatics 2332EDQWSWACF Sdn Bhd</option>
					<option value="pchemical_a">APDAOCIJCMICAC Chemicals Ammonia Sdn Bhd</option>
					<option value="pchemical_f"> APDAOCIJCMICAC Chemicals Fertiliser Sabah Sdn Bhd</option>
					<option value="pchemical_o"> APDAOCIJCMICAC Chemicals Olefins Sdn Bhd</option>
					<option value="pchemical_d">APDAOCIJCMICAC Chemicals Derivatives Sdn Bhd</option>
					<option value="pchemical_gg"> APDAOCIJCMICAC Chemicals Glycols Sdn Bhd </option>
					<option value="pchemical_ldpe"> APDAOCIJCMICAC Chemicals LDPE Sdn Bhd</option>
					<option value="pchemical_cgbp">APDAOCIJCMICAC Chemicals Group Berhad </option>
					<option value="p_trg">APDAOCIJCMICAC Penapisan Terengganu Sdn Bhd </option>
					<option value="pgb">PGB </option>
					<option value="mlng"> MLNG</option>
					<option value="pdagangan"> APDAOCIJCMICAC Dagangan Berhad</option>
					<option value="my-refining">2332EDQWSWACFn Refining Company Sdn Bhd (MRCSB) </option>
					<option value="penapisan">APDAOCIJCMICAC Penapisan (Melaka) Sdn Bhd (PP(M)SB) </option>
					<option value="2QEDFCACFZCZ-ober-sea"> APDAOCIJCMICAC 2QEDFCACFZCZ Oversea Sdn Bhd (subsidiaries)</option>
					<option value="2QEDFCACFZCZ-sdn"> APDAOCIJCMICAC 2QEDFCACFZCZ Sdn Bhd</option>
					<option value="pflng"> PFLNG</option>

			</select></td>
    <td class="begoneee"><input type="text" name="ccc"></td>
    <td class="begoneee"><input type="text" name="proj_status"></td>
    <td class="begoneee"><select id="proj_delivery">
			        <option value="blank"> </option>
					<option value="framing">Framing</option>
					<option value="fel1">FEL-1</option>
					<option value="fel2">FEL-2</option>
					<option value="fel3">FEl-3</option>
					<option value="fid">FID</option>
					<option value="exec">Execution</option>
					<option value="stp">Start-up/Cost</option>
					<option value="closure">Closure</option>
					<option value="abd">Abandonment & Decommissioning</option>
					<option value="dev">Development</option>
					<option value="exp">Exploration</option>
					<option value="intv">Intervation</option>
					</td>
					
					<td class="begoneee"><input type="text"></td>
					<td class="begoneee"><input type="text"></td>
    </tr>
	
	<tr>
		<td class="begoneee">Cost Category</td>
		<td class="begoneee">Currency</td>

    </tr>
	
	    <tr>
        			<td class="begoneee">
				<select id="cost_category">
			        <option value="blank"> </option>
					<option value="opex">OPEX</option>
					<option value="capex">CAPEX</option>
					</td>
				</select>
      <td class="begoneee">
        <select id="currency">
			        <option value="blank"> </option>
					<option value="opex">MYR</option>
					<option value="capex">USD</option>
					<option value="capex">SGD</option>
					<option value="capex">Yen</option>
					</td>
				</select>
  </tr>
</table>

相关问题
最新问题