HTML / CSS格式问题
[英]HTML/CSS Formatting Issues
问题描述
我正在做一个让我感到悲伤的任务。 我应该做一个匹配图像颜色的红色框。 该框应位于页面中心。 该框应该占页面的80％。 该图像应该在盒子里面。 图像应该是其所在框的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;
}
4 个解决方案
解决方案1
0 2012-01-10 21:48:16
我不确定由于某些原因是否需要ul和li ，但是主要缺少的是img没有指定宽度。
如果img没有宽度，它将使用图像的原始宽度并拉伸其容器。 对于当前的html（带有ul ），您需要将图片的宽度设置为100％，因为li已设置为80% 。
解决方案2
0 2012-01-10 21:50:56
尝试打开边框（或使用Firebug或Chrome开发者工具检查您的元素）。 有了边界，我认为事情为什么不像您想象的那样定位变得更加明显。
解决方案3
0 已采纳 2012-01-10 21:53:55
如果不需要该列表，则可以执行此操作。 如果要使用列表，则需要将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都有一些填充。
解决方案4
0 2012-01-10 21:59:42
看起来像这样，尽管我不确定该框是否需要为页面高度的80％或100％。
http://jsfiddle.net/GolezTrol/ZLUGg/2/
我更改了盒子的颜色和图像尺寸以进行测试/演示。 也使开发更容易。
链接的格式问题-HTML / CSS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.