Question

我真的需要你帮助解决这个棘手的问题。也许一双新鲜的眼睛将成为补救措施。我试图尝试将我的向下箭头按钮放在输入框的右侧，但无济于事。如何使输入框的宽度扩展并调整其父元素的大小，同时将向下箭头放在旁边。这是我的问题的图片：

这是期望/最终结果：

这是HTML＆amp;有问题的CSS：

<!DOCTYPE html>

<html>

<head>

<style type="text/css">
* {
    font-family: Segoe UI;
    font-size: 9pt;
}
.dropdown dd, .dropdown dt, .dropdown ul {
    margin: 0px;
    padding: 0px;
}
.dropdown dd {
    position: relative;
}
.dropdown:hover {
    color:#5d4617;
}
.dropdown dt {
    border:1px solid #d4ca9a;
    width: 170px;
}
.dropdown dt input[type=text] {
    border: 0;
    width: 100%;
    box-sizing: border-box;
}
.dropdown dt input[type=button] {
    border: 0;
    width: 15px;
    margin: 0;
    padding: 0;
    position: relative;
}

.dropdown dd ul {
    background:#e4dfcb;
    border: 1px solid #d4ca9a;
    color: #000;
    display: block;
    left: 0px;
    padding:5px 0px;
    position:absolute;
    top:2px;
    width:auto;
    min-width: 170px;
    list-style:none;
}
.dropdown dd ul li {
    padding: 5px;
    display: block;
}
.dropdown dd ul li:hover {
    background-color: #d0c9af;
    cursor: pointer;
}
</style>

<script type="text/javascript">

</script>

</head>

<body>
<dl class="dropdown">
    <dt>
        <input id="fileno" type="text">
        <input type="button" value="&#9660;" id="btn_arrow">
    </dt>
    <dd>
        <ul>
            <li>Brazil</li>
            <li>France</li>
            <li>Germany</li>
            <li>India</li>
            <li>Japan</li>
            <li>Serbia</li>
            <li>United Kingdom</li>
            <li>United States</li>
        </ul>
    </dd>
</dl>
</body>

</html>

Answer 1

定位箭头的最简单方法是使用绝对定位。为此，父级必须具有position:relative。这样的事情可以给你预期的结果：

.dropdown dt {
    position: relative;
}
.dropdown dt input[type=button] {
    position: absolute;
    top: 0;
    right: 0;
}

您还可以看到此fiddle

将向下箭头按钮定位在输入框的右侧

1 个答案: