div之间出现奇怪的垂直线

Question

我在处理输入时遇到了一些问题。它是带有内联提交按钮的文本输入。我在按钮的背景上添加了一个SVG，使其外观呈三角形切割（见图）。

<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>

然而，正如你所看到的，有一条奇怪的垂直线出现了。在Web检查器中，似乎该行包含在input元素中而不是button元素中。我尝试过修改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;
}

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

可以在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以使用箭头定义绿色元素周围的边框形状。不幸的是，虽然左边框的没有定义，但这会导致在左侧绘制最小边框，除非您删除上述规则，否则不会消失，但这也是使得右侧的角落没有圆角，这是你不想要的。

我已尝试添加和删除许多设置，但唯一有效的小技巧是将border-left: 1px solid #fff;添加到标识为<button>的{​​{1}}标记中（直接在HTML中） ：

#code-submit

它创建了一个你不会看到的白色左边框，因为它加入了两个元素的白色背景，并取代了你想要摆脱的浅灰色边框。

这不是100.0000％完美，因为，如果你看非常关闭，你可以看到一个微小的（1px宽）白色＆＃34;中断＆＃34;在代码输入字段和箭头图像相互接触的上边界和下边框处，但我找不到更好的东西。无论如何，我希望它对你有帮助......

Answer 2

抱歉，请尝试以下代码：

$ npm install -g firebase-tools
$ firebase --non-interactive deploy --token "${FIREBASE_TOKEN}"
Error: There was an error loading firebase.json:
undefined is not a function