html - 图片下的 HTML/CSS 文本

Question

以下是所需的样式：

这是 jsfiddle 链接：这里

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：

  /* 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;
        } 

但问题是我无法将每个列表项的背景颜色设为白色（下面有文字的图像）非常感谢任何帮助。谢谢。

Answer 1

小提琴

.photos ul li {
  background: #999;
  display: inline;
  list-style: none;
  float: left;
  margin-right: 10px;
  padding: 0;
  text-align:center; 
  color: #fff;
}

或者

.photos ul li {
  background: #fff;
  display: inline;
  list-style: none;
  float: left;
  margin-right: 10px;
  padding: 0;
  text-align:center; 
  color: #000;
}

Answer 2

您正在为 .photos ul li span a 分配白色背景，而不是 .photos ul li （整个列表项）。如果您希望列表项具有白色背景（或您显示的图像建议的黑色），您应该分配一个 background-color:#000; 到.photos ul li。

http://jsfiddle.net/gespinha/ZvUuy/11/

如果您将正文背景更改为不同的颜色并为列表项应用边距以将它们分开，您会注意到它会根据需要应用。

/* 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;
}

Answer 3

尝试这种方式也许可以帮助

.photos ul li {
    background:white;            
    list-style: none;
    float: left;
    margin:0 10px 10px 0;
    text-align:center; 
}

不需要使用 display:inline 因为你总是使用 float:left

Answer 4

我假设您想要以下内容：

1. 每个块中的黑色背景，您可以使用： .photos ul li { background-color: #000; }

2. 白色文本，你应该有： .photos ul li span { color: #fff; }

3. 白色间隙，可以使用： .photos ul li { margin: 10px; }

最后，你得到这个：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;
}