Question

我试图将表格单元格中下拉菜单内的文本与相邻表格单元格中的其他文本内容对齐。

这是我的代码：

    <!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并存档所需的结果，但是似乎仍然缺少一些东西。

欢迎任何帮助或建议。

Answer 1

您可以使用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>

Answer 2

另一个问题回答了这个问题。

remove space in select box

Text Padding in Select Boxes

在两个结论中，它们实际上都建议您不要这样做。指定了浏览器。

在下拉菜单中对齐文本

2 个答案: