出现在divs之间的奇怪的垂直线

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检查器中，似乎该行包含在输入元素中，而不是按钮元素。我试着修改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中，并且只有当输入失去焦点（在OS X上）时才出现在Safari中。

Answer 1

对不起，请尝试如下代码：

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

Answer 2

这条规则......

.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>标签ID为#code-submit（直接在HTML）唯一的小窍门：

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

它创建了一个白色的左因为它加入了两个元素的白色背景，并替换了您想要去除的浅灰色边框。

这不是100.0000％的完美，因为，如果你看非常接近，你可以看到一个小（1像素宽）白色的“中断”的上，下边界，其中码输入字段和箭头图像触摸彼此，但我无法找到更好的东西。我希望它可以帮助你...