Html 搜索框中搜索文本和搜索按钮之间的边框

html

我无法在输入标记中的：元素之后插入，因为它无法工作，因为它没有结束标记。所以我在main div中管理它，即

.search

。边界显示准确，但我想要这样

---

您至少需要使用一个附加div。如下所示：

<div class="search">
    <div class="search-text">
        <input type="text" value="search..." />
    </div>
    <div class="search-image">
        <input type="image" value="Q" />
    </div>
</div>

---

您现在可以将边框应用于

搜索文本
div.
实际上，您只需使用CSS即可获得所需的结果。

给你的
：在
之后一个
绝对
位置和一个负
边距顶部
等于父级的填充。然后为其指定父级的高度：

.search:after{
    content: " ";
    border-right: 4px solid red;
    margin-left: 20px;
    height: 66px;
    position: absolute;
    margin-top: -20px;
}

添加样式

border-top: 20px solid #FF0000;
border-bottom: 20px solid #FF0000;

至。搜索：在之后

但是.search的填充值为20px。如果你将边框应用于.search文本，那么它甚至看起来就像我需要的一样。如果你更改html结构，你显然也需要更改CSS。我也尝试过使用absolute，但被隐藏了，我知道这里的高度是必须的。谢谢。@C-Link谢谢：-）
border-top: 20px solid #FF0000;
border-bottom: 20px solid #FF0000;