Question

我正在做一项令我悲伤的任务。我应该制作一个与图像颜色相匹配的红色框。此框应该以页面为中心。该框应该是页面的80％。图像应该在框内。图像应该是它所在的BOX宽度的80％。图像应垂直居中。我试图用CSS做到这一点。这是我的代码。我错过了什么？

HTML：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>

    <body>
        <div class="box">
            <ul>
                <li>
                    <a href="http://blackhawks.nhl.com/">
                        <img src="http://www.wallpaperpimper.com/wallpaper/Hockey/Chicago_Blackhawks/Chicago-Blackhawks-Blackhawks-Logo-1-JPS6RQXFBC-1024x768.jpg">
                    </a>
                </li>
            </ul>
        </div>
    </body>
</html>

CSS：

.box  {
    width: 80%;
    background-color: #dd111;
    margin-left: auto;
    margin-right: auto;
} 
.box ul {
    margin-left:auto;
    margin-right:auto;
}
.box ul li {
    width: 80%;
    vertical-align: middle;
}

Answer 1

由于某些原因，我不确定您是否需要ul和li，但您遗漏的主要内容是img没有宽度。

如果img没有宽度，它将使用图像的原始宽度并拉伸其容器。对于您当前的html（使用ul），您需要为图片提供100％的宽度，因为li已设置为80%。

Answer 2

尝试打开边框（或使用Firebug或Chrome开发人员工具检查元素）。随着边界的出现，我认为为什么事情没有像你想象的那样定位会更加明显。

http://jsfiddle.net/2vWY3/1/

Answer 3

如果没有必要列表，您可以这样做。如果要使用列表，则需要将ul填充和边距设置为0.

 <style type="text/css">

    .box {
       width:80%;
       margin:0 auto 0 auto;
    }

    img {
       width:80%;
       margin:0 auto 0 auto;
       display:block;
    }

   .box-stripe {
       width:80%;
       height:15px; 
       margin:0 auto 0 auto;
   }

    </style>


    <body>

    <div class="box">

    <div class="box-stripe"></div>

    <img src="yourimage.png" alt="" />

    <div class="box-stripe"></div>

    </div>

    </body>

或者，如果你更喜欢这个列表，你可以做这样的事情。无论如何它应该让你亲近。

<style type="text/javascript">

.box {
width:80%;
margin:0 auto 0 auto;
}

.box ul {
width:80%;
margin:0 auto 0 auto;
padding:0px;
display:block; /*may not need to do this but I don't think a UL is a block element */
}

.box ul .box-stripe {
width:100%;
display:block;
height:15px;
padding:0px;
margin:0px;
}

.box ul .img {
width:100%;
display:block;
padding:0px;
margin:0px;
}

</style>



      <body>

            <div class="box">

            <ul>

             <li>class="box-stripe"></li>

             <li class="img"><img src="yourimage.png" alt="" /></li>

             <li class="box-stripe"></li>

           </ul>

            </div>

       </body>

每个浏览器在填充，边距，行高等方面对HTML元素的处理方式不同。这就是我推荐CSS重置的原因。大多数UL默认都有一些填充。

Answer 4

看起来像这样，虽然我不确定该框是否需要是该页面 height 的80％或100％。

http://jsfiddle.net/GolezTrol/ZLUGg/2/

我更改了测试/演示的方框颜色和图像尺寸。使开发更容易。

HTML / CSS格式问题

4 个答案: