Css 为什么这些div没有对齐以及它们之间的间距？_Css_Alignment_Html

Css 为什么这些div没有对齐以及它们之间的间距？

css html

Css 为什么这些div没有对齐以及它们之间的间距？,css,alignment,html,Css,Alignment,Html,为什么每件事都不一致？除了右侧和左下角有空间放置其他图像外，不应显示黄色和橙色基本上，我的图片几乎与中心对齐，我还有其他图片，但不在本例中，更容易看到。然而，在这种情况下，当我有150px的高度图像时，150的宽度似乎开始变低。还有，为什么中间有空间尝试下面的更改，希望这就是您所看到的，如果您不想显示黄色，请使用CSS的float属性 .ImgGallery div { display: inline-block; } .ImgGallery div div { /*dis

为什么每件事都不一致？除了右侧和左下角有空间放置其他图像外，不应显示黄色和橙色

基本上，我的图片几乎与中心对齐，我还有其他图片，但不在本例中，更容易看到。然而，在这种情况下，当我有150px的高度图像时，150的宽度似乎开始变低。还有，为什么中间有空间

尝试下面的更改，希望这就是您所看到的，如果您不想显示黄色，请使用CSS的float属性

.ImgGallery div
{
   display: inline-block;
}

.ImgGallery div div
{

/*display: table-cell;
 */
text-align: center;
background: gray;
width: 150px;
height: 150px;

}

另一个问题是，您的代码似乎不符合标准。请尝试此链接，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Przykładowy dokument</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        a img {
            border: none;
        }

        #gallery {
            width: 650px;

            background: orange;
        }

        #gallery li {
            display: inline-block;

            background: yellow;
            border: 1px solid black;
        }

        #gallery img {
            vertical-align: middle;
        }
    </style>
    <script type="text/javascript"></script>
</head>
<body>
    <ul id="gallery">
        <li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li>
    </ul>
</body>
</html>

下面是解释：

Gallery是一种列表，因此它应该以列表的形式在代码中显示。图像之间的这些空白是由于图像被视为内联元素而造成的。您应该知道，代码中内联元素之间的一个或多个白色字符空格、enter、tab等在浏览器中显示为单个空格。这与编写内联文本时的情况相同。可以使用“垂直对齐”属性获得垂直对齐。

我无法在li工作。但我修改了代码，并向后退了一步，使其正确排列。目前没有li，它保留了一个黑色的轮廓，即使在border之后我也无法删除它：none和use divs。现在看起来不错。谢谢：这是一个快速测试。我真正的html是有效的，我不会将html固定在一次性上。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Przykładowy dokument</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        a img {
            border: none;
        }

        #gallery {
            width: 650px;

            background: orange;
        }

        #gallery li {
            display: inline-block;

            background: yellow;
            border: 1px solid black;
        }

        #gallery img {
            vertical-align: middle;
        }
    </style>
    <script type="text/javascript"></script>
</head>
<body>
    <ul id="gallery">
        <li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li
        ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li
        ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li>
    </ul>
</body>
</html>