css div宽度根据文字多少自适应（纯CSS如何实现子元素自适应宽度并居中_html/css_WEB-ITnose）

本文目录

• 纯CSS如何实现子元素自适应宽度并居中_html/css_WEB-ITnose
• div css如何实现输入的文本框宽度自动调节
• 如何设置一个div的宽度为自适应宽度div里只有文字
• CSS中如何让DIV的宽度随内容变化
• div + css问题:怎样让div自动适应文字宽度

纯CSS如何实现子元素自适应宽度并居中_html/css_WEB-ITnose

如上图所示，红色部分DIV宽度是100%，蓝色的是子元素，子元素有border-bottom，且文字右边有一个双箭头。现要求如下： 1、纯CSS实现，不使用JS和table。 2、文字因为是用户输入的，所以每一行的文字宽度都不是固定的，但是文字只考虑一行的情况，不考虑两行，可以用white-space:nowrap;禁止换行。 3、每个子元素右边的双箭头必须是对齐的，右边双箭头与最长那行文字的距离是10px固定的，其它行双箭头与该行双箭头对齐。 4、因为这个是手机端的网页，所以可以考虑用CSS3、HTML5，只要主流的手机浏览器支持即可不知道上面的要求，纯CSS有没有办法实现，具体的思路是什么，HTML可以随意写，只要能实现像图片中这样显示就可以。


回复讨论(解决方案)另外右边双箭头与最长那行文字的距离是10px固定的，其它行双箭头与该双箭头对齐
American AxleGermanic AxleSuspensionBogieBrake DrumAxleBrake DiscBrake ShoeWheel HubKing Pin SeriesFifth Wheel Series*{margin:0;padding:0;outline:none;}body{font:menu;font-size:0.24rem;}a{text-decoration:none;color:#333;}a:hover{text-decoration:underline;color:#d00;}li{list-style:none;}img{border:none;vertical-align:top;}@font-face { font-family: ’iconfont’; src: url(’//at.alicdn.com/t/font_1460087185_4783318.eot’); /* IE9*/ src: url(’//at.alicdn.com/t/font_1460087185_4783318.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */ url(’//at.alicdn.com/t/font_1460087185_4783318.woff’) format(’woff’), /* chrome、firefox */ url(’//at.alicdn.com/t/font_1460087185_4783318.ttf’) format(’truetype’), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url(’//at.alicdn.com/t/font_1460087185_4783318.svg#iconfont’) format(’svg’); /* iOS 4.1- */}.iprocat{background:url(../images/iprocat-bg.jpg);text-align:center;overflow:hidden;}.iprocat ul{display:inline-block;text-align:left;font-size:.24rem;line-height:.4rem;padding-bottom:.24rem;}.iprocat li{border-bottom:1px solid #ddd;position:relative;}.iprocat li:before,.iprocat li:after{content:’’;border-bottom:1px solid #ddd;width:100%;position:absolute;bottom:-1px;}.iprocat li:before{right:100%;}.iprocat li:after{left:100%;}.iprocat li a{color:#666;display:block;}.iprocat li a:before{content:’\e604’;font-family:’iconfont’;float:right;color:#ddd;margin-left:.1rem;}视觉上实现了，但是border-bottom是使用:before和:after拼合起来实现的，不知道有没有更好的办法

div css如何实现输入的文本框宽度自动调节

在不借助 Javascript 的情况下要实现你说的效果没有十分完美的解决方案。下面的 DIV + CSS 能够做到，但唯一不足的是你需要在 HTML 中将两个 “按钮” 写在 “收件人/主题” 前面。

《style type="text/css"》
#outer {width: 400px; border: 1px solid #000; padding: 5px;}
.inner {overflow: hidden;}
.inner div {padding: 5px;}
.label {float: left; width: 70px;}
.iText {display: block; overflow: hidden;}
.iText input {width: 99%;}
.iButton {float: right; width: 70px; text-align: right;}
《/style》

《div id="outer"》
《div class="inner"》
《div class="iButton"》《input type="button" value="常用地址"》《/div》
《div class="label"》收件人：《/div》
《div class="iText"》《input type="text" /》《/div》
《/div》
《div class="inner"》
《div class="iButton"》《input type="button" value="常用主题"》《/div》
《div class="label"》主题：《/div》
《div class="iText"》《input type="text" /》《/div》
《/div》
《/div》

下面这段 Javascript 代码是用于模拟宽度变化，测试用的。

《input type="button" id="test" value="模拟宽度变化" style="margin-top: 100px;" /》
《script type="text/javascript"》
window.onload = function() {
document.getElementById("test").onclick = function() {
document.getElementById("outer").style.width = parseInt(Math.random() * 300 + 300) + "px";
};
};
《/script》

现在大部分手机浏览器对 Javascript 支持都不错，所以不一定非要用  CSS 来实现，可以考虑使用 Javascript。

如何设置一个div的宽度为自适应宽度div里只有文字

第一种：《div style="border:5px solid #f00;float:left;min-width:220px;_width:220px;padding:12px;white-space:nowrap"》最小宽度《/div》
第二种：《div style="border:5px solid #f00;position:absolute;min-width:220px;_width:220px;padding:12px;white-space:nowrap"》最小宽度《/div》
2种方法，你看着用

CSS中如何让DIV的宽度随内容变化

div的内容岁内容变化就好比P标签一样，只要不给div设置宽度就行了；
如
《div style="width:500px;height:auto"》
《div style="width:auto;height:auto"》
宽度随内容变化，外围div好比浏览器的宽度，当里面div内容超过500px的时候自动换行，
《/div》
《/div》

div + css问题:怎样让div自动适应文字宽度

你不给宽度他自然就自动了。。。
还有上面你要加上文档声明
《!doctype html》
《html》
《head》
《style type="text/css"》
body{
text-align:center;
}
.contents{
background-color:red;
}
《/style》
《/head》
《body》
《div class="contents"》最小宽度《/div》
《/body》
《/html》