Question

我有以下HTML（Example）：

<span>Sign in with</span>
<ul>
  <li><a href="#"><i class="icon-facebook"></i></a></li>
  <li><a href="#"><i class="icon-twitter"></i></a></li>
</ul>

CSS：

span {
  display: inline-block;
  font-weight: bold;
  margin-right: 6px;
}

ul {
  display: inline-block;
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 4px;
}

ul li {
  font-size: 2.0rem;
}

我希望SPAN与UL中的图标垂直对齐。但是即使应用填充跨度，我也无法做到。

关于如何解决这个问题的任何想法？

Answer 1

将vertical-align:middle添加到您的<i>元素：

＆＃13;

span {
  display: inline-block;
  font-weight: bold;
  margin-right: 6px;
}
ul {
  display: inline-block;
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul li {
  display: inline-block;
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 4px;
}
ul li {
  font-size: 2.0rem;
}
i[class^="icon-"] {
  vertical-align: middle;
}

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />

<span>Sign in with</span>
<ul>
  <li><a href="#"><i class="icon-facebook"></i></a>
  </li>
  <li><a href="#"><i class="icon-twitter"></i></a>
  </li>
</ul>

＆＃13;

Answer 2

你可以试试这个

HTML：

 <p>Sign in with</p>
    <ul>           
         <li><a href="#"><i class="icon-facebook"></i></a></li>
         <li><a href="#"><i class="icon-twitter"></i></a></li>
     </ul>

Answer 3

试试这个，

@import 'https://fonts.googleapis.com/css?family=PT+Sans';
 * {
  font-family: 'PT Sans', sans-serif;
}
#headerpanel {
  position: fixed;
  display: block;
  background-color: red;
  top: 0;
  left: 0;
  right: 0;/* since we are moving it left a little, we use right: 0; instead of width: 100%; */
  margin: 0px;
  padding: 0px;
  border: 0px;
}

将SPAN与UL垂直对齐

3 个答案: