Html 如何调整 ul 宽度属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11520214/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to adjust ul width property?
提问by Alice
<ul id='ul01'>
<li><a href='#'><img src='img01.png' width="700" height="590" /></a></li>
<li><a href='#'><img src='img02.png' width="700" height="590" /></a></li>
<li><a href='#'><img src='img03.png' width="700" height="590" /></a></li>
</ul>
CSS:
CSS：
#ul01{list-style:none;width:??;}
#ul01 li{float:left;}
This is a horizontal array of images. list.items.count can vary.
What should be the width property to fit all images.
I tried with - auto - and expected resizible width - but it's not.
这是一个水平排列的图像。list.items.count 可能会有所不同。
适合所有图像的宽度属性应该是什么。
我尝试使用 - 自动 - 并预期可调整大小 - 但事实并非如此。
回答by magicalex
Make the lielements inline-blocks and set the white-spaceproperty of the ulto nowrap.
制作li元素inline-blocks 并将 的white-space属性设置ul为nowrap。
li {
display: inline-block;
}
ul {
white-space: nowrap;
}
回答by SaurabhLP
Make these change i think these will work for you...
做出这些改变，我认为这些对你有用......
#ul01{list-style:none;width:100%;}
#ul01 li{float:left; width:33%; }
#ul01 li a { display:block; }
#ul01 li a img { width:100%; height:auto; }
<ul id='ul01'>
<li><a href='#'><img src='img01.png' /></a></li>
<li><a href='#'><img src='img02.png' /></a></li>
<li><a href='#'><img src='img03.png' /></a></li>
</ul>
回答by codingbiz
if your images have to retain the sizes you specified then know that your page will have horizontal scrollbar. If you prefer that this will work
如果您的图像必须保留您指定的尺寸，那么您的页面将具有水平滚动条。如果您希望这会起作用
#ul01{list-style:none;width:2100px;}
#ul01 li{float:left; width:700px}
The ulwidth has to be the (width X 3) + (2 X image-border-if-any} + padding= 2100px + n
的ul宽度必须是(width X 3) + (2 X image-border-if-any} + padding=2100px + n
回答by Meigo62
You just put width property to ul element.
您只需将 width 属性放入 ul 元素。
回答by miszczu
try jquery, so in css file you can put 0, and value would be change later.
试试jquery，所以在css文件中你可以放0，然后值会改变。
<script type="text/javascript">
$(document).ready(function () {
var sum = 0;
$('#ul01 li img').each(function() {
sum += parseInt($(this).attr("width"), 10);
});
$('#ul01').css({ 'width': sum+'px' });
});
</script>
