CSS 如何水平（连续）对齐多个图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25202348/
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 align multiple images horizontally (in a row)?
提问by Natevald
How can one align multiple images, one after another, horizontally? They don't have to fit the width screen: on the contrary, I would like to have them exceed the width of the latter, if that makes any sens.
如何将多个图像一个接一个地水平对齐？它们不必适合宽度屏幕：相反，如果有意义的话，我希望它们超过后者的宽度。
I have checked quite a few answers to similar questions but couldn't find any that would fix my problem.
我已经检查了很多类似问题的答案，但找不到任何可以解决我的问题的答案。
Html:
网址：
<div id="content">
<img src="Content/Images/Personal/Georges.jpg" alt="Georges" class="images" />
<img src="Content/Images/Personal/Rose.jpg" alt="Gers" class="images" />
<img src="Content/Images/Personal/Henry.jpg" alt="Providence" class="images" />
</div>
Css:
css：
.images
{
display: inline;
margin: 0px;
padding: 0px;
}
#content
{
display: block;
margin: 0px;
padding: 0px;
position: relative;
top: 90px;
height: auto;
max-width: auto;
overflow-y: hidden;
overflow-x:auto;
}
Thank you in advance.
先感谢您。
回答by SW4
Effectively, you want to prevent the inlineimgelements from wrapping, as such, you want to use the below on the parent #contentelement:
实际上，您希望防止inlineimg元素换行，因此，您希望在父#content元素上使用以下内容：
white-space:nowrap;
Demo Fiddle
演示小提琴
nowrapCollapses whitespace as for normal, but suppresses line breaks (wrapping).
nowrap像正常一样折叠空白，但禁止换行（换行）。
This style is specifically for the purpose you require.
这种样式专门用于您需要的用途。
回答by Dev
edit css of image as:
将图像的 css 编辑为：
.images
{
display: inline-block;
float:left;
margin: 0px;
padding: 0px;
}
回答by Kheema Pandey
There are many ways to align the images in one line. Check the DEMOusing display:inline-blockMethod.
有多种方法可以在一行中对齐图像。使用方法检查演示display:inline-block。
1. using `float:left` /*you have to clear the float using `overflow:hidden` on parent element */
2. using `display:inline-block`
3. using `Flex` /*Its a new CSS3 property */
Note:I would suggest you as per your requirement you should change your HTML markup and need to use ullisting here.
注意：我建议您根据您的要求更改 HTML 标记并需要在ul此处使用列表。
回答by G.L.P
回答by Alex Robert
just by changing display: block;and adding float:leftattribute to css .imagesclass
只需更改display: block;和添加float:left属性到 css.images类
