Javascript 试图在同一行上显示链接文本和链接图标
我正在使用bootstrap创建一个响应导航,我正在使用bootstrap提供的一个图标创建一个显示/隐藏菜单。问题是它在另一行上显示箭头。有没有办法在一行文本旁边显示箭头 下面是一个演示: 以下是与此提琴一起使用的代码,以使此提琴更加独立:Javascript 试图在同一行上显示链接文本和链接图标,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我正在使用bootstrap创建一个响应导航,我正在使用bootstrap提供的一个图标创建一个显示/隐藏菜单。问题是它在另一行上显示箭头。有没有办法在一行文本旁边显示箭头 下面是一个演示: 以下是与此提琴一起使用的代码,以使此提琴更加独立: <div class="container"> <div class="row"> <div class="col-sm-3 col-md-3 col-lg-2"> <div class="sidebar-na
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-2">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Left Navigation</span>
</div><!--/.navbar-header -->
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<nav id="leftNav" role="navigation" aria-label="Left Navigation">
<!-- TemplateBeginEditable name="Left Navigation" -->
<ul class="nav navbar-nav">
<li><a href="#.html">Home</a></li>
<li><a href="#"><strong>Cars</strong></a>
<a href="#ELP" class="expander" ><span class="glyphicon glyphicon-circle-arrow-right"></span></a>
<ul id="ELP">
<li><a href="#">BMW</a></li>
<li><a href="#">Honda</a></li>
<li><a href="#">Toyota</a></li>
</ul>
</li>
</ul>
</nav> <!-- /Left Navigation -->
</div>
<!--/.nav-collapse -->
</div> <!--/.navbar-default -->
</div> <!--/.sidebar-nav -->
</div> <!--/.col-sm-3 col-md-3 col-lg-2-->
切换导航
左导航
-
您可以在元素中包含图标span
试试这个
<a href="#">
<span class="glyphicon glyphicon-chevron-right"></span> Demo
</a>
您可以将两个元素包装在一个范围内,并将范围设置为显示:内联或内联块
<span style="display:inline-block;">
<a href="../Gateway/index.html"><strong>Cars</strong></a>
<a href="#ELP" class="expander" >
<span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</span>
谢谢你,布莱恩,但我使用图标作为链接打开包括宝马-本田-丰田在内的菜单,如果使用此图标,箭头链接不起作用,请修复我的小提琴链接。第二个选项是本机Boostrap方法,只需要在每个链接中添加一个类。对不起,leo,但我不明白这一点。谢谢,有没有办法在css而不是html上实现这一点?我不知道如何让它在只使用css的旧浏览器上工作,但这在新版本中似乎是可行的:我应该提到,这可能是一种不好的做法,如果可能的话,应该在html中进行修改。意识到我不需要额外的线路。
<a href="#">
<span class="glyphicon glyphicon-chevron-right"></span> Demo
</a>
<span style="display:inline-block;">
<a href="../Gateway/index.html"><strong>Cars</strong></a>
<a href="#ELP" class="expander" >
<span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</span>