Question

我的html和css中的内容需要修复。

文字位于图像和中间位置 arroe放在右边。

HTML

 <div class="login-wrapper">
            <div class="login-header">Choose an account</div>
            <div class="clear-both"></div>
            <ul class="user-account">
              <li>
                <img src="https://lh3.googleusercontent.com/-SI4p5-_t75A/AAAAAAAAAAI/AAAAAAAAAAA/PdNPwK9En0o/photo.jpg?sz=46">
                <span class="account-name">Ali Zafar</span>
              </li>
              <li>
                <img src="https://lh3.googleusercontent.com/-SI4p5-_t75A/AAAAAAAAAAI/AAAAAAAAAAA/PdNPwK9En0o/photo.jpg?sz=46">
                <span class="account-name">Ali Zafar</span>
              </li>
              <li>
                <img src="https://lh3.googleusercontent.com/-SI4p5-_t75A/AAAAAAAAAAI/AAAAAAAAAAA/PdNPwK9En0o/photo.jpg?sz=46">
                <span class="account-name">Ali Zafar</span>
              </li>

            </ul>


          </div>

CSS

/*Login screen*/
.login-wrapper{
  width:50%;
  margin:0 auto;
}

.login-header{
  color:#FFFFFF;
  font-size:1.5em;
  padding:.8em 0 .2em .2em;
  background:#2380DE;
}

.user-account{
  list-style:none;  
  background:#FFFFFF

}

.user-account li{
    background: url("https://ssl.gstatic.com/accounts/ui/arrow_right_1x.png") no-repeat scroll 0 0 transparent;
  list-style-type: none;
  padding: 1em;
  vertical-align: middle;
  border-bottom:1px #EFEFEF solid;
}

.user-account li > img {
  width:50px;
  height:50px;
  -webkit-border-radius: 50%;
}

.user-account li > span.account-name{
 padding-top: 3px;
 color: #427FED;

}


.user-account li > a:after { content: '>'; }

假文本假textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy文本

Answer 1

检查一下。我在width和height li和vertical-align:middle中添加了<img>和<span>。

Fiddle

<强> CSS

/*Login screen*/
 .login-wrapper {
    width:50%;
    margin:0 auto;
}
.login-header {
    color:#FFFFFF;
    font-size:1.5em;
    padding:.8em 0 .2em .2em;
    background:#2380DE;
}
.user-account {
    list-style:none;
    background:#FFFFFF;
        padding:0;
    margin:0;
}
.user-account li {
    background: url("https://ssl.gstatic.com/accounts/ui/arrow_right_1x.png") no-repeat scroll 95% 50% transparent;
    list-style-type: none;
    padding: 1em 2em;
    vertical-align: middle;
    border-bottom:1px #EFEFEF solid;
    display:block;
    position:relative;

}
.user-account li > img {
    width:50px;
    height:50px;
    -webkit-border-radius: 50%;
     vertical-align: middle;
}
.user-account li > span.account-name {
    vertical-align: middle;
    color: #427FED;
}
.user-account li > a:after {
    content:'>';
}

Answer 2

试试这个......

.user-account li {
    border-bottom: 1px solid #EFEFEF;
    height: 50px;
    list-style-type: none;
    padding: 1em;
    vertical-align: middle;
}

.user-account li > img {
    float: left;
    height: 50px;
    width: 50px;
}
.user-account li > span.account-name {
    background: url("https://ssl.gstatic.com/accounts/ui/arrow_right_1x.png") no-repeat scroll right 17px rgba(0, 0, 0, 0);
    color: #427FED;
    float: left;
    padding: 16px 16px 41px;
}

文本未与要在右侧对齐的List的图像和背景定位对齐

2 个答案:

Fiddle