html - 对齐下拉菜单中的文本
问题描述
我正在尝试将表格单元格中下拉菜单中的文本与相邻表格单元格中的其他文本内容对齐。
这是我的代码:
<!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>
推荐阅读
- sql-server - 什么会使 SQL 代理作业在检查其他正在运行的进程的步骤上失败?
- javascript - 在拖动或单击时反应弹簧动画
- sql - 如何在重复行的情况下获取最大前一行并采用每个最大列的优先级
- angular - 发生未处理的异常:NGCC 失败
- botframework - 从 Alexa 频道中提取用户个人资料数据——地址、电子邮件、电话号码、姓名
- pycharm - Pycharm wsl2远程调试:远程文件
映射到本地路径 并且找不到 - c++ - 当主线程显然未阻塞时,QProgressDialog 冻结
- javascript - 根据网站时钟指定命令的开始时间
- ios - WKWebview 设置自定义标题
- python - 我们如何处理大约 300K 列中存在的大量类别。在预处理数据?