HTML中的标签中li横向排列（导航栏制作）

谁践踏了优雅 2022-02-19 11:25 348阅读 0赞

### ***html代码***  ###

<div class="container-fluid h4"  id="shead">
            <ul> 
    			 <li><a href="#" class="a">地区</a></li> 
                <li><a href="#" class="a">安徽省</a></li> 
                <li><a href="#" class="a">铜陵市</a></li> 
    			    <li><a href="#" class="a">类型</a></li> 
                   <li><a href="#" class="a">合同纠纷</a></li> 
    			    <li><a href="#" class="a">借贷纠纷</a></li> 
    			    <li><a href="#" class="a">劳动纠纷</a></li> 
    			 <li><a href="#" class="a">刑事辩护</a></li> 
    			 <li><a href="#" class="a">交通事故</a></li> 
    			 <li><a href="#" class="a">房产纠纷</a></li> 
    			 <li><a href="#" class="a">建筑纠纷</a></li> 
    			 <li><a href="#" class="a">离婚纠纷</a></li> 
    			 <li><a href="#" class="a">其他</a></li> 
    			 <li><a href="#" class="a">执业年限</a></li> 
    			 <li><a href="#" class="a">案例数量</a></li> 
            </ul> 
        </div> 
        </div> 
    	</div>

--------------------

css代码

#shead{
    background-color: #3d578a;
    width: 100%;
    height: 30%;
    vertical-align: middle;
    font-size: 18px;
    
    padding-top: 1%;
    padding-bottom: 1%;
    }
    #shead ul li{
    float:left;
    
    list-style: none;
    margin-left: 2%;
    }
    .a{
    	color:white;
    }

--------------------

### ***效果如下*** ###

![2019041614465771.png][]

[2019041614465771.png]: /images/20220219/552771649dda4acdb4bd68ee130c7f03.png

发表评论取消回复

表情：

评论列表（有 0 条评论，348人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML+CSS制作导航栏

一.效果展示 1.1效果展示 ![5a265be7407d49bc968708b1421c6c7a.png][] 二.项目代码 2.1HTML <

我不是女神ヾ/ 2024年02月22日 09:21/ 0 赞/ 13 阅读

相关 CSS导航栏为什么都用 li + a标签

导航菜单为什么都用 li+a 标签 [html导航菜单为什么都用li+a标签，而不直接用a标签，或者用nav+a标签，html5中导航菜单该怎样写？][html_li_a

╰+攻爆jí腚メ/ 2022年12月01日 14:25/ 0 赞/ 110 阅读

相关 html5 导航栏置顶,html5导航栏横向

html5中怎么样让导航条完全的横向100%显示，附图你里面是不是还有内嵌标签设置了宽度。请注意以下几点一：只能用HTML5 + CSS 二：要保证在不同页面跳转的时候

小灰灰/ 2022年10月05日 10:51/ 0 赞/ 197 阅读

相关 html5--导航栏制作

效果展示： ![Center][] 效果介绍：通过鼠标点击，点到哪个导航栏会显示不同的颜色与其内容如何实现：（前提必须引进自己的jquery.js我这里的是jq.j

「爱情、让人受尽委屈。」/ 2022年09月24日 05:17/ 0 赞/ 201 阅读

相关网页顶部横向导航栏的制作(最最基本的导航栏)

注意：该文章实现的导航效果是最基本的那种，没有加任何的js代码，纯粹使用html标签+css样式实现的。 html代码： <div class=

小咪咪/ 2022年06月17日 01:39/ 0 赞/ 245 阅读

相关导航栏的制作

1.最简单的方法，不是循环出来的 <ul class="clearfix"> <li class="active"><a href="{:url('i

古城微笑少年丶/ 2022年05月10日 05:26/ 0 赞/ 238 阅读

相关用ul,li制作CSS横向菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

た入场券/ 2022年04月16日 02:59/ 0 赞/ 236 阅读

相关 HTML中的标签中li横向排列（导航栏制作）

html代码 <div class="container-fluid h4" id="shead"> <ul> <l

谁践踏了优雅/ 2022年02月19日 11:25/ 0 赞/ 349 阅读

相关如何让li中的标签内容横向排列

1.li标签默认是按纵向排列的解决方式： ![70][] 效果图： ![70 1][] 2.thymeleaf下设置onclick属性 th:οnclick

痛定思痛。/ 2021年09月27日 07:36/ 0 赞/ 390 阅读

相关图文详解如何让ul中的li元素横向排列（附代码）

在页面布局时，我们经常会用到li标签，因为li标签用途很广泛，它可以用来制作列表，选项卡，导航等等。但是<ul>标签里的li默认情况下是纵向排列的，那我们可不可以让li横...

朱雀/ 2021年02月01日 17:10/ 0 赞/ 641 阅读