Question

我有以下小提琴 - 在这里我试图调整＆＃39;点击＆＃39;和<h3>在同一行我在这里面临两个问题 - 当h3内容过长时，它会推送“点击”。 - 并在点击时显示内容正在向侧面移动。关于如何实现这一点的任何想法 - CSS新手。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

此处的问题实际上是h3元素，默认为display: block;。因此，如果您只是删除a#iimarrow{display:inline-block;}（因为a标签默认为display: inline; @ mikelt21 指出）并添加下面的CSS，那么您的问题将得到解决

h3 {
   display: inline;
}

JSFiddle

Answer 2

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

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

如下：

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

Answer 3

您可以通过将正确浮动的<a>元素置于HTML中的<h3>之前来实现此目的：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

CSS对齐 - <h3> <span> </span> </h3>

3 个答案: