我试图将表格单元格中下拉菜单中的文本与相邻表格单元格中的其他文本内容对齐。
这是我的代码:
<!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 并存档所需的结果，但似乎仍然缺少一些东西。
欢迎任何帮助或建议。
最佳答案
您可以使用 margin 将该选择元素撞到上方。尝试这个。我只是设置了 margin: 0 0 0 -10px;。
.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;
margin: 0 0 0 -10px;
}
.mimicRadio option{
background-color: grey !important;
border-color: grey !important;
}<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>
<option value="">Another option</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>关于html - 对齐下拉菜单中的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52999821/