css中Li的横向排列自适应宽度的问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css中Li的横向排列自适应宽度的问题相关的知识，希望对你有一定的参考价值。
一段css代码，导航栏目的字数是不一样的，我想让他根据字数自动伸缩长度
.nav_namewidth:770px; height:38px; line-height:38px; padding-left:4px; float:left
.nav_name uldisplay:none; position:absolute; left:0;top:40px;
.nav_name adisplay:block; text-align:center;float:left; margin-top:2px; width:85px; text-align:center;font-size:14px; font-family:"微软雅黑"
.nav_name a:hover,.nav .nav_name a.curbackground:#d24f5e;background:url(../images/nav.gif) repeat-x
.nav_name li position:relative; float:left;z-index:10;
.listNav background:url(../images/listNav.gif) #d24f5e repeat-x; width:85px; position:absolute;
.listNav a display:block; margin-top:0; border-bottom:dotted 1px #a93643;font-family:"微软雅黑";
.listNav a:hover background:#a93643; font-weight:normal
.listNav a.no border:none
.listNav li a font-weight:normal
首先学习一下width属性的定义和用法：
定义和用法
width 属性设置元素的宽度。
说明
这个属性定义元素内容区的宽度，在内容区外面可以增加内边距、边框和外边距。
行内非替换元素会忽略这个属性。
可以通过width属性设置li中字段的宽度根据实际长度显示宽度。在li的样式中加上width:auto;就可以实现了；现在来看下面一段代码：
CSS样式设置：
#info_maintext-align:center; border:1px solid #CCC;width:620px;#info_main liwidth:auto;float:left;margin:0px 8px; padding:0px;border:1px solid #CCC;
网页代码：
<div id="info_main"><ul>
<li>时间：dede:field name='pubdate' function='strftime("%Y-%m-%d %H:%M","@me")' /</li>
<li>来源：dede:field.source/</li>
<li>作者:dede:field.writer/</li>
<li>点击:<script src="dede:field name='phpurl'//count.php?view=yes&aid=dede:field name='id'/&mid=dede:field name='mid'/" type='text/javascript' language="javascript"></script>次</li>
</ul>
</div> 参考技术A
当父元素和子元素都没有定义宽度的情况下实现水平居中：
display:inline-block
可以使用text-align:center和display:inline-block相结合，这个技巧需要一个父元素。
1、html代码:
代码如下:
<div class="navbar">
<ul>
<li><a href="/">Home</a></li>
…
</ul>
</div>
2、CSS代码:
代码如下:
.navbar
text-align:center;
.navbar ul
display:inline-block;
.navbar li
float:left;
.navbar li + li
margin-left:20px;
3、IE系列IE8+支持，要IE7 IE6 支持需要加入以下代码使display:inline像display:inline-block一样
代码如下:
.navbar ul
*display:inline;
*zoom:1;
position:relative
使用position:relative与float相结合的技巧及其浮动和定位参照物的关系，这个技巧需要两个父元素，一个用来定位而另外一个用来避免出现滚动条。
HTML代码:
代码如下:
<div class="navbar">
<div>
<ul>
<li><a href="/">Home</a></li>
…
</ul>
</div>
</div>
CSS代码:
代码如下:
.navbar
overflow:hidden;
.navbar > div
position:relative;
left:50%;
float:left;
.navbar ul
position:relative;
left:-50%;
float:left;
.navbar li
float:left;
.navbar li + li
margin-left:20px;
浏览器支持度较低 只Chrome和Firefox这样的-webkit- -moz-内核浏览器。当然以后慢慢会发展起来的。
这个方式是推动浏览器发展的一个新的东西，目前供应于所以可以写前缀的浏览器，并没有工作在IE9和IE9以下。
根据你的需求来选择合适的方法吧，display:inline-block兼容性较好，flex-box将会用于未来。
把导航结构贴一下，我帮你改改~追问
是需要整个CSS吗？
追答你的html的页面~~
追问首页栏目1
追答.nav_name adisplay:block; text-align:center;float:left; margin-top:2px; width:85px; text-align:center;font-size:14px; font-family:"微软雅黑"把上面的width:85px;去掉试一下~~~
去掉之后是全部在一行内了，不过没有了间隔了，全部挤在一起了，就像这样
首页栏目1栏目2栏目3 没有间距
恩
本回答被提问者采纳 参考技术C 字数不一样的话，你这样太麻烦了<style>
.nav
width:1000px; /*这个值就根据你自己的*/
.nav li
float:left;
display:inline-block;
border:#CCC 1px solid;
padding:5px 10px; /*5px为上下 ，10px为左右，具体值你自己需求了*/
｝
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">我们的服务</a></li>
</ul>
</div>
</body>
js或者jquery如何获取自适应宽度的具体值
有一个ul标签里面的li是宽度是随文本长度自适应宽度的，js或者jquery有什么方法开始算出他们的值？？
参考技术A 网页可见区域宽： document.body.clientWidth网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth 参考技术B 直接获取LI的宽度$('li').width()就可以 参考技术C document.getElementById('li的id').offsetWidth;本回答被提问者采纳 参考技术D <script>
function AutoResizeImage(maxWidth, maxHeight, objImg)
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1;
var w = img.width;
var h = img.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth == 0 && maxHeight == 0)
Ratio = 1;
else if (maxWidth == 0) //
if (hRatio < 1) Ratio = hRatio;
else if (maxHeight == 0)
if (wRatio < 1) Ratio =wRatio;
else if (wRatio < 1 || hRatio <1)
Ratio = (wRatio <= hRatio ? wRatio : hRatio);
if (Ratio < 1)
w = w * Ratio;
h = h * Ratio;
objImg.height = h;
objImg.width = w;
</script>
<td>
<ahref="www.baidu.com"title="baidu">
<imgsrc="images/f.jpg" onload='AutoResizeImage(180,180,this)' border="0"/>
</a>
</td>
这是根据图片自设高度，你根据自己的需求改下，就行 第5个回答 2015-09-15 当然可以，需要你去查一下属性。jq获取这li然后获取长宽
以上是关于css中Li的横向排列自适应宽度的问题的主要内容，如果未能解决你的问题，请参考以下文章