Html 在下拉菜单中对齐文本
我试图将表格单元格下拉菜单中的文本与相邻表格单元格中的其他文本内容对齐 这是我的密码:Html 在下拉菜单中对齐文本,html,css,Html,Css,我试图将表格单元格下拉菜单中的文本与相邻表格单元格中的其他文本内容对齐 这是我的密码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style ty
<!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>
文件
.可模仿{
显示:表格;
边界间距:1米;
}
米米克罗先生{
显示:表格行;
}
米米切尔先生{
显示:表格单元格;
}
米米克拉迪奥先生{
背景色:继承;
颜色:继承;
宽度:首字母!重要;
填充:0em!重要;
文本对齐:左!重要;
文本缩进:0px;
光标:指针;
}
.mimicRadio选项{
背景色:灰色!重要;
边框颜色:灰色!重要;
}
输入购买率
硬币类型:
选择硬币
您可以使用边距
在选定元素上撞击。试试这个。我刚刚设置了margin:0-10px代码>
。可模仿{
显示:表格;
边界间距:1米;
}
米米克罗先生{
显示:表格行;
}
米米切尔先生{
显示:表格单元格;
}
米米克拉迪奥先生{
背景色:继承;
颜色:继承;
宽度:首字母!重要;
填充:0em!重要;
文本对齐:左!重要;
文本缩进:0px;
光标:指针;
边际:0-10px;
}
.mimicRadio选项{
背景色:灰色!重要;
边框颜色:灰色!重要;
}
输入购买率
硬币类型:
选择硬币
这个问题在另一个问题中得到了回答
在这两个结论中,他们真的建议你不应该这样做。指定了它的浏览器。最有可能的是下拉列表左侧有一些填充。看看那个填充是多少,你可以在它上面加上一个负的边距,这样它就抵消了。你刚刚证明了我需要睡一觉:(为什么我没有想到我应用了这么多不必要的css呢。Thanks@BobbyAxe这正好是我需要跨浏览器解决方案的原因谢谢你的回答我确实学会了一两个技巧;)