CSS中ul li居中的问题

li的float:left方法显然有一个问题,就是无法居中(水平),只能使用padding-left或margin-right的方法方法来固定其居中。

一直以为对ul li居中对齐已经掌握了。但最近做项目时发现之前li的float:left方法显然有一个问题,就是无法居中(水平),只能使用padding-left或margin-right的方法方法来固定其居中。但这样可能在宽屏与窄屏的显示不一致。
使用这种方法主要是利用li的浮动固定宽度来实现,li的默认display为block,将其这个属性改为inline便可实现这种ul li居中的问题

<style type="text/css">
#bNav{
margin-top:10px;
background:#D9EBF5;
text-align:center;
}
#bNav ul{
padding:4px 0;
margin:0;
overflow:hidden;
}
#bNav ul li{
display:inline;
padding:0;
}
</style>

<div id="bNav" class="bNav">
 <ul>
  <li><a href="index.aspx" title="Home">Home</a></li>
  <li></li>
  <li><a href="info.aspx?info_id=8" title="About Us">About Us</a></li>
  <li></li>
  <li><a href="info.aspx?info_id=9" title="Department Design">Department Design</a></li>
  <li></li>
  <li><a href="info.aspx?info_id=10" title="Law Declaration">Law Declaration</a></li>
  <li></li>
  <li><a href="info.aspx?info_id=11" title="Contact Us">Contact Us</a></li>
  <li></li>
  <li><a href="info.aspx?info_id=12" title="Application Agent">Application Agent</a></li>
  <li></li>
  <li><a href="info.aspx?info_id=13" title="Job Services">Job Services</a></li>
  <li></li>
  <li><a href="info.aspx?info_id=14" title="Apply Link">Apply Link</a></li>
 </ul>
</div>
 

时间: 2024-11-02 17:00:57

CSS中ul li居中的问题的相关文章

css中ul li的背景小图标属性设置的两种情况

ul li的背景小图标属性设置一般会有两种情况:定义在ul里及li里,这两种定义在什么情况下使用,在下文给出详细的介绍,经常div+css布局的朋友不妨参考下,希望对大家有所帮助   这里我们分两种情况列出: ①当标题前的图标是很长的一绺而不是单独的一个点或者类似图标时,在定义背景图background要定义在<ul>里.因为很长,所以放在<li>的外边<ul>里 ②当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<l

一个css中关于li元素的使用,有疑问,请看代码,问题在哪里?

问题描述 一个css中关于li元素的使用,有疑问,请看代码,问题在哪里?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&

讨论CSS中的各类居中方式_CSS/HTML

今天主要谈一谈CSS中的各种居中的办法. 首先是水平居中,最简单的办法当然就是 复制代码 代码如下: margin:0 auto; 也就是将margin-left和margin-right属性设置为auto,从而达到水平居中的效果. 那么其他的办法呢?容我一一道来: line-height 首先介绍文字的水平居中方法: 复制代码 代码如下: <div class="wrap">刘放</div> 利用line-height设为height的一样即可: 复制代码 代

关于html中 ul li 中加入div(div位置随意设置)的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

css创意ul+li实现的细线表格实现代码_经验交流

时间 2008-7-30 2008-7-30 2008-7-30 2008-7-30 2008-7-30 2008-7-30 2008-7-30 2008-7-30 2008-7-30 2008-7-30

CSS让ul所有的li居中显示的方法

  CSS ul li居中本来以为很容易就实现了,因为平时都是让li float:left,这样后面的可以排成一行,对居中没做要求,不过最近搞个项目,必须让ui的每个li都居中显示,这可让我难为了,没想到一时把我难坏了,不过还是被我解决了.下面说下方法: 我的方法主要是利用li的浮动固定宽度来实现,li的默认display为block,将这个属性改为inline就可以让ul li居中,简单吧!下面来段代码实例: 呵呵,由此你可以做成一款菜单了.

CSS UL LI布局实现表格效果

  今天带了一篇简短的教程,用CSS的UL LI制作实现一个表格,以往听说CSS实现表格并不好,还不如直接用传统的TABLE来实现,其实我不这么认为,如果你CSS非常熟练了,用CSS来实现表格同样很省事,不信就看一下这个代码吧: 最后来看下表格的效果,还不错吧,而且兼容火狐.Chrome等浏览器.

CSS教程:li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符: ul li{ list-style-type:none; } B).如果你想将列表符换成图像,则: ul li{ list-style-type:none; list-style-image: url(/blog/images/icon.gif); } C).为了左对齐,可以用如下代码: ul{ list-style-type:none; margin:0px; } D).如果想给列表加背景色,可以用如下代码: ul{ list-style-t

css ul li-如何让ul li 的溢出内容的显示为....

问题描述 如何让ul li 的溢出内容的显示为.... .hotdiscuss{ border:1px solid; width: 685px; height: 500px; margin-top:10px; float: left; } .hotdiscuss li{ width:330px; height:40px; margin:3px; float:left; display:block; } 我已经让ul li 2行显示再换行显示的. 怎么让 li里面显示溢出的内容显示为......符