Question

我在<ul>元素中生成了这个html元素锚点。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<ul class="nav pull-left">
  <li style="display: inline-block;text-align: center;background-color:red;"><a class="navbar-brand" ui-sref="sites.list" style="padding: 11px 09px;" title="sites"><i class="glyphicon glyphicon-tree-conifer"></i></a></li>
  <li style="display: inline-block;text-align: center;background-color:#0094ff;"><a class="navbar-brand" ui-sref="sitesDamages.sitesList" style="padding: 11px 09px;" title="events"><i class="glyphicon glyphicon-exclamation-sign"></i></a></li>
 
</ul>

我的问题是如何在保留图标高度的同时制作较小的<li>元素高度（即我可以将<li>元素的高度设置为内部字形图标的高度）？

Answer 1

将.navbar-brand的高度更改为auto而不是50px：

<li style="display: inline-block;text-align: center;background-color:red">
    <a class="navbar-brand" ui-sref="sites.list" style="padding: 9px; height: auto;" title="sites">
        <i class="glyphicon glyphicon-tree-conifer"></i>
    </a>
</li>

DEMO

如果您可以移除内联CSS并在单独的外部文件中创建这些样式，那就太好了。

Answer 2

更改a元素的高度。

如果更改li元素的高度，元素的大小会增加，但整个元素都不会被点击。因此，您最好定位a标记并更改其高度。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<ul class="nav pull-left">
 <li style="display: inline-block;text-align: center;background-color:red;"><a class="navbar-brand" ui-sref="sites.list" style="padding: 11px 09px; height:80px" title="sites"><i class="glyphicon glyphicon-tree-conifer"></i></a></li>
                <li style="display: inline-block;text-align: center;background-color:#0094ff;"><a class="navbar-brand" ui-sref="sitesDamages.sitesList" style="padding: 11px 09px;" title="events"><i class="glyphicon glyphicon-exclamation-sign"></i></a></li>
 
</ul>

＆＃13;

Answer 3

当您打算使用CSS时，您必须覆盖类.navbar-brand。目前，由于您使用的是内联样式，请将高度设置为auto。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<ul class="nav pull-left">
 <li style="display: inline-block;text-align: center;background-color:red;"><a class="navbar-brand" ui-sref="sites.list" style="padding: 11px 09px; height:auto" title="sites"><i class="glyphicon glyphicon-tree-conifer"></i></a></li>
                <li style="display: inline-block;text-align: center;background-color:#0094ff;"><a class="navbar-brand" ui-sref="sitesDamages.sitesList" style="padding: 11px 09px; height:auto" title="events"><i class="glyphicon glyphicon-exclamation-sign"></i></a></li>
 
</ul>

＆＃13;

如何改变<ul>元素的高度？

3 个答案: