1

次の構造を実現したいと思います。

[gfhtfg..., kgjrfg..., asd,      mrhgf,   ]  
 ^-------^  ^-------^  ^-------^ ^-------^  
     X          X          X         X
(X = a fixed length)

<div>固定長の があり、その中に水平方向のコンマ区切りulのリンクのリスト ( ) があります。
要素は<li>固定幅でなければならないため、リンクが固定長を超える場合は省略記号が表示されます (text-overflowプロパティを使用)。

リストを水平にする方法を 2 つ知っています。1 つはプロパティを使用してdisplay: inlineおり、もう1 つはfloatプロパティを使用しています。

  • 最初のアプローチでは、CSS 仕様でインライン要素の幅を設定できないため、固定幅を設定できません。
  • 2番目のアプローチは混乱を引き起こします:O
  • 要素の設定floatは、<a>そこで幅を制限することを意図して、コンマから区切ります。

ブラウザーの互換性の問題はありません。WebKit をサポートするだけで済みます。

作業しようとしたコードを含めました：

<!DOCTYPE html>
<html lang="en">
<head>
 <title>a title</title>
 <style>
  body { font-family: arial; font-size: 10pt; }

  div {
   height: 30px;
   width: 300px;
   background: #eee;
   border: 1px solid #ccc;
   text-align: center;
  }

  ul { margin: 0px; padding: 0px; }
  ul li:after { content: ","; }
  ul li:last-child:after { content: ""; }
  ul li a { text-decoration: none; color: #666; }

  ul li {
   margin: 0px;
   padding: 0px;
   list-style: none;
   overflow: hidden;
   text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
   /* Inline elements can't have a width (and they shouldn't according to the specification */
   display: inline;
   width: 30px;
  }
 </style>
</head>
<body>

<div>
 <ul>
  <li><a href="#">a certain link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">once again</a></li>
  <li><a href="#">another one</a></li>
 </ul>
</div>

</body>
</html>

ありがとうございました。

4

4 に答える 4

9 
...
ul li a {
 text-decoration: none; color: #666; 
 display: inline-block; 
 max-width: 50px; /* 'X' minus gutter */
 white-space: nowrap; 
 text-overflow: ellipsis; 
 overflow:hidden;
}
ul li {
 margin: 0px;
 padding: 0px;
 list-style: none;
 white-space: nowrap;
 display: inline-block;
 width: 60px; /* 'X' */
}
...

私の2¢

于 2010-05-24T22:16:06.690 に答える
3

li 要素の「display」属性を「inline-block」に設定します。WebKit ブラウザーと完全に互換性があります。インライン レベルの要素には次元を指定できませんが、ブロック レベルの要素には次元を指定できます。inline-block は、あなたのケースでは満足のいく媒体です - 寸法を許可しますが、インラインで表示します。フロートとクリアのより良い代替手段でもあると思います。

于 2010-05-24T21:40:34.923 に答える
1

display: inline-blockを試して、固定幅を設定しましたか? imgこれにより、タグのように、サイズを変更できるインライン要素を持つことができます。

于 2010-05-24T21:42:05.900 に答える
0

以前に試しましdisplay: inline-blockたが、リンクにスペースが含まれていると、単語が新しい行に分割されます。さらにランダム検索を行うと、その問題が修正される
ことが明らかになりました。したがって、最終的な解決策は、これらのプロパティを要素に追加することです。white-space: nowrap;<li>

ul li {
 width: 30px;
 display: inline-block;
 white-space: nowrap;
}

返信ありがとうございます。

編集：実際には、コンマは表示されません。andプロパティを
削除すると、要素が重複し、コンマが残りのテキストとともに非表示になっていることがわかります。overflowtext-overflow<li>

于 2010-05-24T22:13:28.960 に答える