当前位置：首页 → 问答吧 → margin属性中padding-left可以排版，为什么padding-right就不行呢？

margin属性中padding-left可以排版，为什么padding-right就不行呢？

时间：2011-05-09

来源：互联网

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ru"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=gbk"> <style type="text/css"> .pl {padding-left:66%;border:1px solid teal;;} .pr {padding-right:30%;border:1px solid tan} button {margin-right:20px;width:100px;height:36px;} </style> </head> <body> <div class='pl'> <button>a</button> <button>b</button> <button>c</button> </div> <div class='pr'> <button>a</button> <button>b</button> <button>c</button> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 yakczh 于 2011-5-9 21:17 编辑 ]

作者: yakczh 发布时间: 2011-05-09

回楼主，实际上你的padding-right是有效的，可以看看下面的例子，文字遇到右边边距30%的地方自动换行了。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>New Document</title> <style type="text/css"> .pl {padding-left:66%;border:1px solid teal;} .pr {padding-right:30%;border:1px solid tan} button {margin-right:20px;width:100px;height:36px;} </style> </head> <body> <div class="pl"> <button>a</button> <button>b</button> <button>c</button> </div> <div class="pr"> <button>a</button> <button>b</button> <button>c</button> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 bboyjoin 于 2011-5-9 20:36 编辑 ]

作者: bboyjoin 发布时间: 2011-05-09

还是说我想实现的效果吧，其实就是float:right的效果，但是float有很多副作用，看能不能不用float也有实现的办法
　一行中有几个button，个数宽度都是不定的，　留出一定的右边距后，然后自动排，排到哪里算那里，padding-left是可以实现从左开始排，但是如果button个数不定，padding-left的值不好计算，所以最后是给定一个padding-right,剩下的排多少算多少．
另外试了下margin,这个结果也跟padding差不多，看下面的结果

　

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ru"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=gbk"> <style type="text/css"> button {width:100px;height:32px;} </style> </head> <body> margin-left可以实现效果，但是button个数不定的情况下margin-left值不好计算<hr/> <div style="border:1px solid tan;padding:10px;" > <div style="border:1px solid chocolate;margin-left:800px; ; " > <button></button> <button></button> <button></button> </div> </div> 留出margin-right,剩下的能不能从右面自动排？排成上面的样子<hr/> <div style="border:1px solid tan;padding:10px;" > <div style="border:1px solid chocolate;margin-right:100px;" > <button style="width:120px" ></button> <button></button> <button style="width:130px"></button> <button></button> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 yakczh 于 2011-5-9 21:21 编辑 ]

作者: yakczh 发布时间: 2011-05-09

margin属性中padding-left可以排版，为什么padding-right就不行呢？

热门阅读

热门下载