如何在较小的屏幕上使侧边栏水平？答案

【问题标题】：How do I make my sidebar horizontal on smaller screens?如何在较小的屏幕上使侧边栏水平？
【发布时间】：2018-01-02 05:52:19
【问题描述】：

我想为当地的收容所做点好事，所以我免费为他们建立了一个新网页。不过，我还是个新手，在最后的润色上确实需要一些帮助。

虽然我会非常感谢有关 HTML/CSS 的任何帮助，尤其是指出我的编码中的错误，但我目前的问题是我的侧边栏。当屏幕小于桌面尺寸时，我终于让它漂浮在主要内容之上，但它绝对拒绝水平显示自己和内容。有人可以帮我找出我做错了什么吗？

而且.. 提前非常感谢您。我已经为这个问题苦苦挣扎了一天多。

我所有的 HTML/CSS：https://codepen.io/Pinchofginger/pen/KZqzEP#code-area

我的侧边栏的代码：

 <div id="sidebar">

          <ul>
            <li class="fancy">
              <h3>Tryk her</h3> <img src="billeder/kat/.jpg" alt="kat">
              <p><a href="#">Kat2</a>
                <p>bla bla bla bla bla bla bla bla</p>
            </li>

            <li class="fancy">
              <h3>Tryk her også</h3> <img src="billeder/kit.jpg" alt="Kit">
              <p><a href="#">Kat2</a>
                <p>bla bla bla bla bla bla</p>
            </li>

            <li class="fancy">
              <h3>Endelig</h3><img src="billeder/killinger.jpg" alt="Her">
              <p>
                <p><a href="#">Kat3</a> bla bla bla bla bla bla bla</p>
            </li>

            <li class="fancy"> link </li>
            <li class="fancy"> link </li>
            <li class="fancy"> link </li>
            <li class="fancy"> link </li>

          </ul>
        </div>
        <!-- Sidebar -->

和 CSS

   #sidebar
{   text-align: center;
    float: left;
  width:15%;
    margin-right: 3%;
    padding: 15px 10px 10px 10px;
    background: white;
    color: #215e1e;
    border: solid 1px #c0c0c0;}

#sidebar img
{width: 87%;}

#sidebar h2, #sidebar h3, #sidebar h4
{   color: black;}

#sidebar a
{ font-weight: bold;
text-decoration: none;
color: #2b6028}

#sidebar ul {   list-style: none;}


.fancy
{   padding: 8px 0 8px 0;
    border-top: solid 1.3px brown;}

【问题讨论】：

标签： html css media-queries responsive sidebar

【解决方案1】：

尝试研究 CSS 网格或 Bootstrap 之类的东西，它们可能会满足您的需求。

【讨论】：

【解决方案2】：

类似的东西：

@media only screen and (max-width: 750px) {

    #sidebar {
        float: none;
    }

    #sidebar .ul {
        display: inline-box;
    }

}

（这会到 css 文件的末尾）

编辑：对于这么小的事情，我不建议使用 css 框架，因为这些框架太过分了，而且至少需要几周的时间才能理解这些内容是怎么回事 :)

【讨论】：

【解决方案3】：

我认为要获得您想要的效果，您需要执行以下操作：

@media only screen and (max-width: 800px){
 #sidebar{
     width:100%;
 }
 #sidebar li,h3,img,p{
     display:inline;
 }

并在同一个媒体查询中添加一些样式以使其看起来不错

【讨论】：