Question

我有以下代码：

<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="get">
<div class="input-group">
<input type="text" placeholder="domain" value="<?php echo $domain; ?>" name="domain" class="form-control" autofocus />
        <span class="input-group-btn">
            <button class="btn btn-default" type="submit">DiG</button>
            <select class="btn btn-default" name="record_type">
            <option value="<?php echo $record_type ?>" selected><?php echo strtoupper($record_type) ?></option>
            <option value="soa">SOA</option>
            <option value="ns">NS</option>
            <option value="a">A</option>
            <option value="mx">MX</option>
            <option value="txt">TXT</option>
            <option value="cname">CNAME</option>
            <option value="srv">SRV</option>
        </select>
        </span>
    </div>
</form>

我的目标是按钮和下拉菜单与文本框对齐，但选择菜单关闭，如下所示：

http://i.stack.imgur.com/DVqcf.png

我尝试在样式中添加填充，但它只是完全脱离了它。

我该如何解决问题？

Answer 1

JS FIDDLE

如果你的意思是阵容水平线，那么看看这个jsfiddle

添加样式以选择标记。

    <form action="" method="get">
<div class="input-group">
<input type="text" placeholder="domain" value="textvalue" name="domain" class="form-control" autofocus />
        <div class="input-group-btn">
            <button class="btn btn-default" type="submit">DiG</button>
            <select class="btn btn-default" name="record_type" style="padding:7px 0;">
            <option value="selectedvalue" selected>Selected</option>
            <option value="soa">SOA</option>
            <option value="ns">NS</option>
            <option value="a">A</option>
            <option value="mx">MX</option>
            <option value="txt">TXT</option>
            <option value="cname">CNAME</option>
            <option value="srv">SRV</option>
        </select>
        </div>
    </div>
</form>

Bootstrap btn-default没有排列输入组div元素

1 个答案: