把箭头或三角形放在行尾

我想在输入表单的结尾侧用箭头（或三角形很好）复制这种外观。该图像是从旧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

把箭头或三角形放在行尾

回答

相关问题