图像下的 HTML/CSS 文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18820850/
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
HTML/CSS Text under image
提问by neknek mouh
Below is the desired style:
以下是所需的样式：
This is the jsfiddle link: here
这是jsfiddle链接：here
HTML:
HTML：
<div class="photos">
<ul>
<li><span><a href="#"><img src="http://cdn.androidbeat.com/wp-content/uploads/2013/07/android.jpg" width="200" height="150" /></a></span>
<span>Android</span>
<a href="">See More...</a>
</li>
<li><a href="#"><img src="http://lotssports.com/wp-content/uploads/2013/07/zappy-android-300x300.jpg" width="200" height="150" /></a>
<span>Android</span>
<a href="">See More...</a>
</li>
<li><a href="#"><img src="http://cdn.androidbeat.com/wp-content/uploads/2013/07/android.jpg" width="200" height="150" /></a></li>
<li><a href="#"><img src="http://2.bp.blogspot.com/-65ZTcnMYW9c/TurVOon7PrI/AAAAAAAAA_s/07tBb3zCktI/s400/new%2Bprof.png" width="200" height="150" /></a></li>
</ul>
</div>
CSS:
CSS：
/* gallery display */
.photos {
display: block;
}
.photos ul {
list-style: none;
}
.photos ul li {
display: inline;
list-style: none;
float: left;
padding: 0 10px 0 0;
text-align:center;
}
.photos ul li span a {
background-color: #fff;
}
.photos ul li a {
display: block;
/*
margin-right: 10px;
margin-bottom: 7px; */
opacity: 0.75;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.photos ul li a:hover {
opacity: 1.0;
}
.photos ul li a img {
border: 6px solid #e1d9ec;
}
But the problem is I can't make the background color white for each list item (image with text underneath) Any help is much appreciated. thanks.
但问题是我无法将每个列表项的背景颜色设为白色（图片下方有文字）非常感谢任何帮助。谢谢。
回答by mdesdev
.photos ul li {
background: #999;
display: inline;
list-style: none;
float: left;
margin-right: 10px;
padding: 0;
text-align:center;
color: #fff;
}
or
或者
.photos ul li {
background: #fff;
display: inline;
list-style: none;
float: left;
margin-right: 10px;
padding: 0;
text-align:center;
color: #000;
}
回答by gespinha
You are assigning a white background to the .photos ul li span a, not the .photos ul li (the whole list item). If you want the list item to have a white background (or black as the image you showed suggests), you should assign a background-color:#000; to the .photos ul li.
您正在为 .photos ul li span a 分配白色背景，而不是 .photos ul li（整个列表项）。如果您希望列表项具有白色背景（或您显示的图像建议的黑色），则应指定背景颜色：#000；到 .photos ul li。
http://jsfiddle.net/gespinha/ZvUuy/11/
http://jsfiddle.net/gespinha/ZvUuy/11/
If you change the body background to a different colour and apply a margin to the list items, to separate them, you will notice that it is then applied as you want.
如果您将正文背景更改为不同的颜色并对列表项应用边距以将它们分开，您会注意到它会根据需要应用。
/* gallery display */
body {
background:#000;
}
.photos {
display: block;
}
.photos ul {
list-style: none;
}
.photos ul li {
display: inline;
list-style: none;
float: left;
padding: 0 10px 0 0;
text-align:center;
background-color: #fff;
margin:5px;
}
.photos ul li a {
display: block;
/*
margin-right: 10px;
margin-bottom: 7px; */
opacity: 0.75;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.photos ul li a:hover {
opacity: 1.0;
}
.photos ul li a img {
border: 6px solid #e1d9ec;
}
回答by Vuthy Sok
Try this way maybe can help
试试这种方式也许可以帮助
.photos ul li {
background:white;
list-style: none;
float: left;
margin:0 10px 10px 0;
text-align:center;
}
No need use display:inline because you always use float:left
不需要使用 display:inline 因为你总是使用 float:left
回答by stevel
I assume you wanted the following:
我假设你想要以下内容：
Black background in each block, you do that with: .photos ul li { background-color: #000; }
White text, you should have: .photos ul li span { color: #fff; }
White gaps, which can be done with: .photos ul li { margin: 10px; }
每个块中的黑色背景，您可以使用： .photos ul li { background-color: #000; }
白色文本，你应该有： .photos ul li span { color: #fff; }
白色间隙，可以用： .photos ul li { margin: 10px; }
In the end, you get this: http://jsfiddle.net/vZ8eD/1/
最后，你得到这个：http: //jsfiddle.net/vZ8eD/1/
/* gallery display */
.photos {
display: block;
}
.photos ul {
list-style: none;
}
.photos ul li {
display: inline;
list-style: none;
float: left;
padding: 20px;
margin: 10px;
text-align:center;
background-color: #000;
}
.photos ul li span {
color: #fff;
}
.photos ul li a {
display: block;
/*
margin-right: 10px;
margin-bottom: 7px; */
opacity: 0.75;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.photos ul li a:hover {
opacity: 1.0;
}
.photos ul li a img {
border: 6px solid #e1d9ec;
}
