1

テキストとテキストをドロップダウンするカラットがありますが、何らかの理由でキャレットをテキストと垂直に揃えることができません。

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);

位置:絶対; 上:10px; }

4

2 に答える 2

1

これを変える：

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

これに：

<a href="#" id="drop" class ="dropdownsearch">Stuff&nbsp;<span class = "searchcaret"></span></a></div>​

それを行ったのは主にdisplay:inlineでした。

于 2012-12-13T03:55:05.567 に答える
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 のパディングを移動して、希望どおりに微調整します。

于 2012-12-13T03:56:01.730 に答える