html - div之间出现奇怪的垂直线

Question

我在处理输入时遇到了一些问题。它是带有内联提交按钮的文本输入。我在按钮的背景中添加了一个 SVG，使其看起来像是被切割成三 Angular 形(见图)。

<div class="input-block animated fadeIn">
    <span class="sub">Have a 5-digit code? Enter it here.</span>
    <div id="code-input" class="ui action massive input">
        <input type="text" placeholder="X3FMN" maxlength="5">
            <button id="code-submit" class="ui icon button">
                <i class="mdi mdi-arrow-right"></i>
            </button>
    </div>
</div>

但是，如您所见，出现了一条奇怪的垂直线。在网络检查器中，该行似乎包含在输入元素中而不是按钮元素中。我试过修改 CSS 边框和轮廓并强制关闭它们，但我没有运气。

有问题的行似乎是由这个 CSS 规则引起的:

.ui.action.input:not([class*="left action"]) > .button:last-child,    
.ui.action.input:not([class*="left action"]) > .buttons:last-child > 
.button, .ui.action.input:not([class*="left action"]) > .dropdown:last-child {
    border-radius: 0px 0.285714rem 0.285714rem 0px;
}

如果它被停用，线条会消失，但该元素右端的圆 Angular 也会消失。

可以在 healthdollars.com 查看该站点(仍在开发中)。

更新:似乎这条线一直出现在 Chrome 中，而只有当输入失去焦点时才会出现在 Safari 中(在 OS X 上)。

Answer 1

这个规则...

.ui.action.input:not([class*="left action"]) > .button:last-child,
.ui.action.input:not([class*="left action"]) > .buttons:last-child > .button, 
.ui.action.input:not([class*="left action"]) > .dropdown:last-child {
    border-radius: 0px 0.285714rem 0.285714rem 0px;
}

... 定义一个 border-radius用箭头定义绿色元素周围的边框形状。不幸的是，虽然没有左边框的定义，但这会导致在左侧绘制一个最小边框，除非您删除上述规则，否则它不会消失，但这也使得右侧的 Angular 没有圆 Angular ，这是您不想要的。

我已经尝试添加和删除许多设置，但唯一有效的小技巧是添加 border-left: 1px solid #fff;到 <button> ID 为 #code-submit 的标签(直接在 HTML 中):

<button id="code-submit" class="ui icon button" style="border-left: 1px solid #fff;">

它创建了一个您看不到的白色左边框，因为它连接了两个元素的白色背景，并取代了您想要去除的浅灰色边框。

这不是 100.0000% 完美，因为如果您非常仔细观察，您会在代码输入字段和箭头图像相互接触，但我找不到更好的东西。无论如何，我希望它能帮助你......