html - 如何让插入符与文本对齐

Question

我有文本，然后是一个 carat 下拉文本，但出于某种原因，尽管我很努力，但无法使插入符号与文本垂直对齐。

Jsfiddle:http://jsfiddle.net/nCP9J/5/

HTML:

<div id ="hiddensubmit" class = "dropdown-toggle" data-toggle="dropdown" onclick="document.formSearch.submit()" style="top:55px; font-size:20px;">
<a href="#" id="drop" class ="dropdownsearch">Stuff&nbsp;<span class = "searchcaret" style="display:inline;line-height:66px;vertical-align:middle;"></span></a></div>

CSS:

.dropdown-toggle {
  *margin-bottom: -3px;
}
.searchcaret {
  display: inline-block;
  width: 0;
  height: 0;
  line-height:100px;
  padding: 10px 0px 0px 0px;
  vertical-align: middle;
  border-top: 4px solid #000000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
  opacity: 0.3;
  color: #5A5A5A;
  filter: alpha(opacity=30);

position:absolute；顶部:10px；

Answer 1

在插入符范围的内联 CSS 中，更改:

<a href="#" id="drop" class ="dropdownsearch">Stuff&nbsp;<span class = "searchcaret" style="display:inline;line-height:66px;vertical-align:middle;"></span></a>

到:

<a href="#" id="drop" class ="dropdownsearch">Stuff&nbsp;<span class = "searchcaret" style="display:inline-block;line-height:66px;vertical-align:middle;"></span></a>

您需要为任何垂直对齐更改它。然后移动 CSS 中的填充以完全按照您的需要进行调整。