7

IDE と同じように、マウスオーバーしたときに列の端にテキストを浮かせたいと思います。

これが私がこれまでに得たものです。

要素の配置を に変更すると、端から浮かせることができますが、absolute「スペースを占有」しません。

また、フローティングビットの周りに境界線を付けてもかまいません。

これを達成する方法はありますか？

4

2 に答える 2

6

これをサポートする 2 つの方法を見つけました。最初の方法では、各 li 内に span タグを追加する必要がありますが、すべてのブラウザーで機能しているようです。2 つ目は、マークアップとまったく同じように機能しますが、chrome と safari では機能しません。

すべてのブラウザ:

http://jsfiddle.net/vkBqg/1/

このソリューションは非常にシンプルで、基本的に次のようになります。

li {
   white-space: nowrap;
   overflow-x: hidden;
   width: 150px;
}

li:hover {
    overflow-x: visible;
}

Webkit ベースのブラウザー (chrome、safari) を除くすべて:

http://jsfiddle.net/aeARH/1/

これはかなりハックであり、li の幅と表示タイプを変更してから、改行を強制する必要があります。li:hover は次のようになります。

overflow-x: auto;
width:auto;
content:"\A";
display:inline;

これらの両方のテイクアウェイは position:absolute である必要があります。要素間の自然な順序を維持しようとしている場合は、うまく機能しません。

于 2013-04-20T04:41:37.590 に答える
2

私はそれを試してみて、マークアップの変更をまったく必要としないソリューションを思いつきました。いくつかのテストを行ったところ、Chrome 26、Safari 5.1.7、Firefox 20、IE10、IE10で動作するようです。 IE9 モードとIE8 モードの IE10 では、これらすべてのブラウザーとブラウザー モードで同じように見えますが、IE7 モードで IE10 を使用すると壊れ始めます。

次のようになります。

列の端に浮かぶテキスト

基本的に私が行ったことは、 を設定float:leftしてliから をwidth:auto設定li:hoverすることです。これにより、テキストが列の端に浮かぶようになります。

li次に、境界線を追加するために、前の の幅を継承する の直後に疑似要素をレンダリングしていliます。次に、境界線、マージン、高さ、および行の高さを設定して、この疑似要素を前の の上に配置しましたli。を設定しmargin-leftて、列の幅を超える の150px後ろにのみ表示されるようにしました。li

右側にスペースを追加するために、 を に変更しwhite-space: no-wrapましたwhite-space: pre。これにより、内部に追加された空白が保持されますli(追加された場合、それは必須ではありません。少し見栄えを良くするために追加しました)。

ここにjsFiddleがあります。

HTMLは次のとおりです。

<div>
  <ul>
    <li>some really long text </li>
    <li>some text that doesn't fit into the column width </li>
    <li>yeah dude, this is sample text </li>
    <li>woot woot! double rainbows </li>
  </ul>
</div>

CSS は次のとおりです。

li {
  white-space: pre;
  overflow-x: hidden;
  background-color: #f2f2f2;
  line-height: 21px;
  width: 150px;
  float: left;
  clear: both;
}
li:hover:after {
  content:'';
  height: 19px;
  margin: -21px 0px 0px 150px;
  border-width: 1px 1px 1px 0px;
  border-style: solid;
  display: block;
}
li:hover {
  width: auto;
}
div {
  width:155px;
  border-right: 3px solid;
  background-color: #f2f2f2;
}
ul:before, ul:after {
  content:' ';
  display: table;
}
ul {
  list-style: none;
  padding: 5px 0 5px 5px;
  margin: 0;
}
ul:after {
  clear: both;
}
body {
  margin: 0;
  padding: 0;
}

アップデート

にMicro clearfix ハックを含めましたがdiv、高さを固定するのではなく、コンテンツに基づいて高さを調整するようになりました。

更新 2

width:autoスクロールの問題は、スクロールバーが右側にあるため、子要素を設定すると、含まれる要素の幅が実際に変化することです。スクロールバーは動き続けます。追加のラッパーを使用してみましたdivが、スクロール バーを作成する要素内のどこからでも、スクロール バーの上に何かをフロートさせることはできないようです。スクロールできる唯一の方法は、 を設定overflow:hiddenしてから、 jQuery ScrollToulプラグインを使用して 内を上下にスクロールすることです。ul

スクロールを伴う jsFiddle の例

于 2013-04-20T09:48:09.733 に答える