在一个无序列表中有两列

Question

你必须按＆＃34;整页＆＃34;查看附加的片段显示。

我想排列我的选项以使它们对齐，复选标记位于左侧。

＆＃13;

＆＃13;

<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
		<div id="navbar" class="navbar-collapse collapse">
			<ul class="nav navbar-nav">
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Showing: C
						<span class="caret"></span>
						</a>
						<ul class="dropdown-menu" role="menu">
							<li><a href="##">A</a></li>
							<li><a href="##">B</a></li>
							<li><a href="##">&#10003; C</a></li>
							<li><a href="##">D</a></li>
							<li><a href="##">E</a></li>
						</ul>
					</li>
             </ul>
         </div>

<script src="//cdn.jsdelivr.net/bootstrap/latest/js/bootstrap.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是一个使用字体真棒（或字形）的例子。

＆＃13;

＆＃13;

.checked {
  position: relative;
}
.checked:before {
  content: "\f00c";
  font-family: FontAwesome;
  font-size: 12px;
  padding-right: 0;
  position: absolute;
  top: 0px;
  right: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="dropdown">	<a href="#" class="dropdown-toggle" data-toggle="dropdown">Showing: C
						<span class="caret"></span>
						</a>

      <ul class="dropdown-menu" role="menu">
        <li><a href="##">A</a>

        </li>
        <li><a href="##">B</a>

        </li>
        <li><a href="#"><i class="checked"></i> C</a>

        </li>
        <li><a href="##">D</a>

        </li>
        <li><a href="##">E</a>

        </li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

或以UTF-16十六进制

.checked {
    position: relative;
}
.checked:before {
    content:"\2713";
    font-size: 14px;
    padding-right: 0;
    position: absolute;
    top: 0px;
    right: 5px;
}