ul导航居中

我们在写导航时,尤其是ul导航,想让li在ul中居中?呵呵~好难

那么如何让li元素在ul中居中呢?

其实挺简单的

将li设置成行内元素,然后给ul外层添加一个div,将ul包裹起来,给外层div添加text-align:center;

写了一个小demo

<head>
<style>
.test{text-align:center;}
.test ul{border:1px solid red;}
.test li{display:inline;border:1px solid blue;margin:0px 10px}
</style>
</head>
<body>
<div class="test">
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</div>
</body>

时间: 2025-01-11 08:41:17

ul导航居中的相关文章

ul导航条

<!DOCTYPE html> <html> <head> <title>通用导航条</title> <style type='text/css'> body,div,ul,li{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif} /* \5B8B\4F53 代表 宋体*/

Bootstrap学习笔记(6)--导航居中

说明:没找到好办法 <div class="row"> <ul class="nav nav-pills col-md-offset-4"> <li class="active"><a href="">主页</a></li> <li><a href="#">主页</a></li> <

Bootstrap——导航居中

这是采用了栅格,设置缩进,使看起来居中,但是手机浏览会靠到最左边.另外center-block类好像也不管用. <div class="row"> <ul class="nav nav-pills col-md-offset-4"> <li class="active"><a href="">主页</a></li> <li><a href

bootStrap中的ul导航4

<div class="container"> <br/> <ul class="nav nav-pills nav-justified"> <li class="dropdown"><a href="" data-toggle="dropdown">新闻<span class="caret"></span&g

bootStrap中的ul导航

<!doctype html><html > <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> </head> <body> <div class="container">

bootStrap中的ul导航3-垂直导航

<div class="container"> <br/> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="">新闻</a></li> <li><a href="">音乐</a></li> &

bootStrap中的ul导航2

<!doctype html><html > <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> </head> <body> <div class="container">

浮动后的 &lt;li&gt; 如何在 &lt;ul&gt; 中居中显示?

百度了许久都没有满意的解决方案,现在终于搞定了. 其实,只要 ul 的父元素 css 样式设了 text-align: center; 然后 ul 设了 display: inline-block; li 再设 display: inline; 就可以了.多简单的事儿,我只要这个简单的效果,但网上一堆复杂的乱七八糟的设置方法,表现得多高深似的却也无法最终解决问题,最后突发奇想设一下发现得了. html标签 <div id="footer"> <ul> <l

居中的六种方法

居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中.垂直居中和水平垂直居中.而其中水平居中相对于后两者来说要简单得多.早期总结了一下互联网上有关于水平垂直居中的几种实现方案,比如说<CSS制作水平垂直居中对齐>中介绍了八中实现水平垂直的方案,而在<CSS制作图片水平垂直居中>一文介绍了四种实现图片垂直居中的方案,并且在<CSS3实现水平垂直居中>使用了css3的flexbox的属性轻松实现多行文本水平垂直居中的方法.当然大家有可能认为这些