0

確かにこれはこれに対する簡単な解決策ですが、私はそれを解決しようと頭を悩ませています。約3つのリストアイテムを含むタブ付きコンテナがあり、それぞれにハイパーリンクがあります。ブラウザウィンドウのサイズを小さくすると（たとえば右から）、要素が右端に表示されなくなります。代わりに、リストアイテムのサイズが小さくなり、他の2つのリストアイテムの幅のすぐ下に調整されます。

最小幅を要素の幅と同じに設定しています。

どこで微調整する必要がありますか？

これが意味構造です

<div id = "tabbed">
  <ul>
     <li><a href = "#tab_1">Tab 1</a></li> <!-- 3 list items -->
  </ul>
  <div class = "tabs" id = "tab_1"> <!--3 tabs, each tab corresponds to the link in the list item -->
  </div>
</div>

CSSは次のとおりです。

#tabbed
{
width :80%;
margin:auto;
margin-top:20px;
}

#tabbed ul{
margin:0px;
margin-top:15px;
}

#tabbed li
{
display: inline-block;
list-style-type:none;
border:1px solid #ccc;
border-bottom: 0px;
border-top-left-radius:4px;
border-top-right-radius:4px;
margin-right:5px;
margin-top:5px;
padding:4px 4px 10px 4px;
width: 30%;
background:#87CEEB;
}

#tabbed a{
 font-family:Arial, Helvetica, sans-serif;
 font-size: 13px;
 font-weight:bold;
 color: #7F818B;
 display:block;
 text-align:center;
 text-decoration:none;
 margin-top:5px;
 margin-bottom:5px;
}
4

2 に答える 2

0

はい、あなたがやっていることの html と CSS/スタイルの例を教えてください。ブラウザがコンテンツをラップする方法は、実装に大きく依存します。リストを水平にするために CSS display: inline を使用していると思いますか?

于 2012-08-02T01:27:29.467 に答える
0

見るコードがなくても、次のことを提案できます。

試す

your_div {overflow:hidden;}

まず、

第二に、min-width はブラウザの半分しか観察されていません。最小幅を設定するための別のアプローチと、最良の結果を得るためのコード例を試すことをお勧めします:)

于 2012-08-02T02:28:11.707 に答える