CSS 对齐 -

Question

我有以下 fiddle - 在这里我试图对齐“点击”和 <h3>在同一行我在这里面临两个问题 -当h3内容太长，它正在插入“点击” -并在显示内容时单击它向侧面移动。关于如何实现这一点的任何想法 - CSS 的新手。

尝试给予 display:inline至 <h3>但这在这种情况下没有帮助。 http://jsfiddle.net/92spd439/

$('#ttt a#iimarrow').css({
  cursor: "pointer"
}).on('click', function() {
  $(this).next('ul').toggle();
});

ul {
  display: none;
}
#ttt {
  float: right;
}
a#iimarrow {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3><a> tdhfkjshdfhsdfsdflkshdlflskfjl</a><h3>
<span id="ttt">
    <a id="iimarrow">click</a>
<ul>
    <li>12</li>
    <li>13</li>
    </ul> 
    </span>

Answer 1

这里的问题实际上是 h3 元素默认为 display: block;。因此，如果您只是删除 a#iimarrow{display:inline-block;}(因为 a 标签默认为 display: inline; 作为 @mikelt21 指出)并添加下面的 CSS，然后您的问题就会得到解决。

h3 {
   display: inline;
}

JSFiddle