0

当浏览器足够大时，我创建了一个看起来正确的网站。但是当您调整浏览器大小并使其更小时，过滤器部分（带有 li 项的 ul）会从水平变为垂直。

如果您访问网站 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 回答