0

ブラウザーが十分に大きい場合に正しく見える Web サイトを作成しました。しかし、ブラウザーのサイズを変更して小さくすると、フィルター セクション (ul と li アイテム) が水平から垂直に変わります。

ウェブサイト www.andrewsimonmcallister.tv にアクセスした場合。音楽メニュー項目をクリックします。

サブタイトルがあり、フィルタ セクションが続くセクションは、ブラウザが十分に広い場合は問題ないように見えますが、ブラウザを縮小すると、全体がドット付きの垂直リストに変わります。並べ替えオプションを水平方向に積み重ねる方法はありますが、コンテナー内で、フィルター オプションを積み重ねますが、フィルターと並べ替えのセクションを水平に保ちます。

また、楽曲一覧の説明欄も同様です。テキストを下に折り返す必要がありますが、タイトルの下ではなく、説明部分内にとどまります。

すべての助けは素晴らしいでしょう。

さて、コードについて

HTML

トップフィルター部

音楽フィルター: オーケストラ エレクトロニック その他 ディスプレイ:サウンドトラック広告

説明セクション

<ul>
                                <li class="tracknumber">                                        
                                    <div id="jp_container_1" class="jp-audio" style="display:inline-block;">
                                        <div class="jp-type-single">
                                            <div class="jp-gui jp-interface">
                                                <ul class="jp-controls">
                                                    <li><a href="javascript:;" class="jp-play" tabindex="1">&nbsp;</a></li>
                                                    <li><a href="javascript:;" class="jp-pause" tabindex="1">&nbsp;</a></li>
                                                </ul>
                                                <div name="prog1" class="jp-progress">
                                                    <div name="seek1" class="jp-seek-bar">
                                                        <div name="play1" class="jp-play-bar"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="number1" class="number">1</div>
                                </li>
                                <li class="tracktitle">Beginnings</li>
                                <li class="tracktime">2:04</li>
                                <li class="trackprogress"><div id="trackprogress1" class="trackprogressbar"></div></li>
                                <li class="trackcat">Orchestral</li>
                                <li class="trackdescription">Lush sweeping strings in this opening credits cue.</li>
                            </ul>

** CSS **

.contentinformation {
padding-left: 10px;
color: #303234;
font-size: 16px;
letter-spacing: 0;
}

.contentfilterlist {
display: inline-block;
list-style-type: none;
left: 0;
right: 0;
}

.contentfilteritem {
display:inline-block;
list-style-type: none;
}

.contentfiltertitle {
padding-left: 10px; 
padding-right: 10px; 
vertical-align: middle;
font-size: 18px; 
letter-spacing: 0;
}

.contentfilteroption {
padding-left: 8px;  
vertical-align: bottom;
}

.contentfiltertext {
padding-right: 6px; 
vertical-align: middle;
letter-spacing: 0;
font-size: 13px;
font-variant: small-caps;
}

.contentfilterdivide {
padding-right: 80px;
}

.contentmain {
position: absolute;
left: 0;
right: 0;
top: 40px;
padding-left: 100px;
padding-right: 100px;
z-index: 11;
}

/****************************************
* Music
****************************************/
.tracktitle{
display:inline-block;
width: 250px;
}

.tracktime{
    display:inline-block;
width: 55px;
}

.trackprogress{
    display:inline-block;
width: 110px;
}

.trackprogressbar {
background: url("../images/music/progress-bg.gif") 0 0 repeat-x;
width:80px;
height:8px;
cursor: pointer;
opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=50);
    z-index: 12;
}

.trackcat {
    display:inline-block;
width: 135px;
}

.trackdescription{
    display:inline;
}

すべてのヘルプは大歓迎です!!

ありがとう！

4

1 に答える 1

0

コメントで述べたように、tableここで要素を使用する必要があります：

<table>

<thead>
 <tr>
  <th>Tracknumber</th>
  <th>Title</th>
  <th>Time</th>
  <th>Progress</th>
  <th>Category</th>
  <th>Description</th>
 </tr>
</thead>

<tbody>

 <tr>
  <td>1</td>
  <td>Beginnings</td>
  <td>2:04</td>
  <td><div id="trackprogress1" class="trackprogressbar"></div></td>
  <td>Orchestral</td>
  <td>Lush sweeping strings in this opening credits cue.</td>
 </tr>

<tr>
 <td>…&lt;/td>
 <td>…&lt;/td>
 <td>…&lt;/td>
 <td>…&lt;/td>
 <td>…&lt;/td>
 <td>…&lt;/td>
</tr>

</tbody>

</table>
于 2012-08-13T10:57:25.703 に答える