Question

js fiddle 1.通过CSS在右侧中间对齐图标 2.当用户选择正确答案时，我试图显示图标。

<style>

. li.rightAnswerOption:after {
    content: "\2714";
    font-family: FontAwesome;
    display: block;
    font-size: 24px;
    font-weight: 999;
    float: right;
    margin-right: -15px;
    width: 1.3em;
    color: #0d923f;
}

li.wrongAnswerOption:after {
    content: "\2715";
    font-family: FontAwesome;
    display: block;
    margin-right: -15px;
    padding-bottom: 5px;
    font-size: 24px;
    font-weight: bolder;
    float: right;
    width: 1.3em;
    color: red;
}

            <ul class="list-group col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-9 col-xs-offset-0 col-xs-12">

                <li class="question-option list-group-item answerOption wrongAnswerOption">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

        </ul>

Answer 1

绝对的立场是你的答案

ul li{
  background: #DDD;
  padding: 5px 1.3em 5px 5px;
  position: relative;
}
li.right:after,
li.wrong:after{
  display: block;
  font-family: FontAwesome;
  font-size: 24px;
  font-weight: 999;
  position: absolute;
  right: 0;
  top: calc(50% - 12px);
  width: 1.3em;
}
li.right:after{
  color: #0d923f;
  content: "\2714";
  
}
li.wrong:after{
  color: red;
  content: "\2715";
}

<ul>
  <li class="right">Lorem Ipsum</li>
  <li class="wrong">Dolor Sit amet</li>
</ul>

将图标对齐到css的右中心

1 个答案: