CSS对齐- <h3> <span>

Question

我有以下两个问题:当h3内容太长时，它会按下' click‘；当它显示内容时，它会横向移动，而当它显示内容时，就会单击。任何关于如何获得这一点的想法- 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

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

h3 {
   display: inline;
}

Answer 2

我相信像this这样的东西可能就是你要找的。

我所做的是将float:left添加到第一个<a>中。

如下所示：

<h3>
   <a style="float:left"> tdhfkjshdfhsdfsdflkshdlflskfjl</a>
</h3>

Answer 3

您可以通过在HTML中将右浮动的<a>元素放在<h3>之前来实现这一点：

​

$('#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>
<div id="ttt"><a id="iimarrow">click</a>
  <ul>
    <li>12</li>
    <li>13</li>
  </ul>
</div>
<h3><a>tdhfkjshdfhsdfsdflkshdlflskfjl</a><h3>

​

请注意，<span>不能包含块级<ul>元素，因此我使用了<div>来代替它，否则唯一的变化就是重新排列，以便<div> (#ttt)位于<h3>之前。