把箭頭或三角形放在行尾

我想在輸入表單的結尾側用箭頭（或三角形很好）複製這種外觀。該圖像是從舊Flash應用程序正被轉換爲HTML5：把箭頭或三角形放在行尾

我已經儘可能得到作爲具有這樣圍繞所述輸入字段中的線：

HTML

<form action=""> 
    <div class="line"> 
     <label>Cab Width = 
      <input type="number" id="cabWidth" name="cabWidth" min="30" max="57.5" step="0.125" value="32" autofocus> (decimal inches) 
     </label> 
    </div> 
</form>

CSS

.line { 
    display: flex; 
    flex: 1; 
    width: 100%; 
    margin: 20px auto; 
    line-height: 1em; 
} 
.line:before, .line:after { 
    content: ''; 
    flex-grow: 1; 
    margin: 0px 4px; 
    background: linear-gradient(black, black); 
    background-size: 100% 2px; 
    background-position: 0% 50%; 
    background-repeat: repeat-x; 
}

但我無法弄清楚如何添加到這個CSS三角形或某種箭頭的結尾。也許它不能完成。

希望我能解決這個問題的任何想法或指導。

來源

2017-08-08 BitBug

製作一些圖片，除非你不介意HTML實體字體不一致。 – PHPglue

我不確定我會介意HTML實體。像雙角度引號在每一端都可能會很好，但我不知道如何將它們添加到行尾。 – BitBug

您的解決方案非常接近，唯一的問題是我們無法使用：after：之後添加箭頭。見下面的解決方案:)

我採取了不同的方法，並提出了兩個不同的線跨度。在這些線跨度中的每一個上，我都使用了：將箭頭添加到末尾之後。

.line-container { 
 
    display: flex; 
 
    width: 100%; 
 
    margin: 20px auto; 
 
    align-items: center; 
 
} 
 

 
.line { 
 
    flex-grow: 1; 
 
    height: 1px; 
 
    background: black; 
 
    position: relative; 
 
} 
 

 
.line.arrow-right:after { 
 
    position: absolute; 
 
    content: ''; 
 
    bottom: -10px; 
 
    right: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 10px solid transparent; 
 
    border-bottom: 10px solid transparent; 
 
    border-left: 10px solid black; 
 
} 
 

 
.line.arrow-left:after { 
 
    position: absolute; 
 
    content: ''; 
 
    top: -10px; 
 
    left: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 10px solid transparent; 
 
    border-bottom: 10px solid transparent; 
 
    border-right: 10px solid black; 
 
} 
 

 
label { 
 
    margin: 0 15px; 
 
}

<form action=""> 
 
    <div class="line-container"> 
 
    <span class="line arrow-left"></span> 
 
    <label>Cab Width = 
 
     <input type="number" id="cabWidth" name="cabWidth" min="30" max="57.5" step="0.125" value="32" autofocus> (decimal inches) 
 
    </label> 
 
    <span class="line arrow-right"></span> 
 
    </div> 
 
</form>

來源

2017-08-08 01:29:49 Passersby

太棒了！感謝您的幫助。太搞笑了：後：我新的後它不會工作，但我不得不嘗試它（無論如何，我做了），然後轉向堆棧溢出:-) – BitBug

很高興聽到你自己試了一下:) – Passersby

如果您使用Bootstrap，您可以免費獲得Glyphicons的子集，並且它們包括許多箭頭類（等等）。

http://getbootstrap.com/components/

您可以引導他們的CDN（內容分發網絡）連接

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

如果您不需要的JavaScript組件，你可以直接鏈接到上面的bootstrap.min.css鏈接並跳過可選的主題和JavaScript。

然後將該類應用於空的跨度以顯示圖形。網站上有相應類名的可用列表。

<span class="glyphicon glyphicon-chevron-left"></span> 
<span class="glyphicon glyphicon-chevron-right"></span>

您可以通過CSS現有的元素與添加這些的：語法後，就只需要挖掘到引導css文件，並找到您要使用的圖標相應的代碼，例如用於以上：

glyphicon-字形右

:after { 
    font-family: 'Glyphicons Halflings'; 
    content: "\e080"; 
}

glyphicon-字形左

:after { 
    font-family: 'Glyphicons Halflings'; 
    content: "\ e079"; 
}

來源

2017-08-08 01:29:25

把箭頭或三角形放在行尾

回答

相關問題