出現在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像素寬）白色的「中斷」的上，下邊界，其中碼輸入字段和箭頭圖像觸摸彼此，但我無法找到更好的東西。我希望它可以幫助你...