【发布时间】：2018-10-26 00:29:03
【问题描述】：
我正在尝试将表格单元格中下拉菜单中的文本与相邻表格单元格中的其他文本内容对齐。
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style type="text/css">
.mimicTable{
display: table;
border-spacing: 1em;
}
.mimicRow{
display: table-row;
}
.mimicCell{
display: table-cell;
}
.mimicRadio{
background-color: inherit;
color: inherit;
width: initial !important;
padding: 0em !important;
text-align: left !important;
text-indent: 0px;
cursor: pointer;
}
.mimicRadio option{
background-color: grey !important;
border-color: grey !important;
}
</style>
<main class="form">
<form action="" method="POST">
<center><p class="whiteGrey font35"> Enter Buying Rate </p></center>
<br><br>
<div class="mimicTable">
<div class="mimicRow">
<div class="mimicCell">Coin Type :</div>
<div class="mimicCell">
<select name='coin_type'>
<option value="Select_Coin">Select Coin</option>
<?php
foreach ($_SESSION['biscuits']['coin_list'] as $coin)
{
echo "<option value='".$coin."'>".$coin."</option>";
}
?>
</select>
</div>
</div>
<div class="mimicRow">
<div class="mimicCell">
<select class="mimicRadio" name="buy_type">
<option value="coin_buy">Coins</option>
<option value="currency_buy">Currency ($)</option>
</select>
</div>
<div class="mimicCell"><input type="text" class="mimicRadioValue" required pattern="[0-9.]{1,}" name="buy_type_value" placeholder="Quantity to buy in Coins"></input></div>
</div>
<div class="mimicRow">
<div class="mimicCell">Buying Rate ($) :</div>
<div class="mimicCell"><input type="text" pattern="[0-9]{1,}" name="buy_rate" placeholder="Buying rate / USD ($)"></input></div>
</div>
<div class="mimicRow">
<div class="mimicCell">Extra Message :</div>
<div class="mimicCell"><textarea name="espec" pattern="[a-zA-Z0-9 ._$@#₦]{0,100}" maxlength="100" placeholder="Optional Message"></textarea></div>
</div>
</div>
<input type="submit" class="glassButton" name="buy" value="Buy"></input>
</form>
</main>
</body>
</html>
这是图片说明：
如果您想知道这只是完整 css 中的一个最小可验证代码/示例，它们在下拉菜单周围没有边框或框线。
我已经尝试了很多使用 css 和 JavaScript 的技巧来操纵 Dom 并存档所需的结果，但似乎仍然缺少一些东西。
欢迎任何帮助或建议。
【问题讨论】：
-
下拉列表的左侧很可能有一些填充。看看那个填充有多少，你可以添加一个负边距，这样它就被抵消了。