Html 在div之间出现奇怪的垂直线_Html_Css_Forms_Svg

Html 在div之间出现奇怪的垂直线

html css forms svg

Html 在div之间出现奇怪的垂直线,html,css,forms,svg,Html,Css,Forms,Svg,我正在处理的输入有一些问题。这是一个带有内联提交按钮的文本输入。我在按钮的背景中添加了一个SVG，使其看起来像被剪成三角形（见图）如果取消激活，该线将消失，但该元素右端的圆角也将消失该网站可在（仍在开发中）查看更新：似乎该行始终出现在Chrome中，只有在输入失去焦点时才出现在Safari中（均在OS X上）。抱歉，请尝试以下代码： header#home div.header-content div#code-input button#code-submit { backgrou

我正在处理的输入有一些问题。这是一个带有内联提交按钮的文本输入。我在按钮的背景中添加了一个SVG，使其看起来像被剪成三角形（见图）

如果取消激活，该线将消失，但该元素右端的圆角也将消失

该网站可在（仍在开发中）查看

更新：似乎该行始终出现在Chrome中，只有在输入失去焦点时才出现在Safari中（均在OS X上）。

抱歉，请尝试以下代码：

header#home div.header-content div#code-input button#code-submit {
    background-color: #7BE13E;
    background-image: url("/img/triangle-white.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 75px;
    position: relative;
    background-position: left center;
    margin-left: -3px;
}

抱歉，请尝试以下代码：

header#home div.header-content div#code-input button#code-submit {
    background-color: #7BE13E;
    background-image: url("/img/triangle-white.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 75px;
    position: relative;
    background-position: left center;
    margin-left: -3px;
}

这条规则

.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;
}

。。。定义一个

边框半径

，用箭头定义绿色元素周围的边框形状。不幸的是，虽然没有左边框的定义，但这会导致在左侧绘制最小边框，除非删除上述规则，否则不会消失，但这也会使右侧的角没有圆角，这是您不希望的

我尝试过添加和删除许多设置，但唯一有效的小技巧是添加

左边框：1px solid#fff

到id为

#code submit

的

标记（直接在HTML中）：

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

这并不是100.0000%的完美，因为如果你看得很近，你可以在代码输入字段和箭头图像相互接触的上下边界看到一个微小的（1px宽）白色“中断”，但我找不到更好的。我希望这对你有帮助