Question

好吧，我到处都是，找不到以下问题的有效解决方案：

我使用css在html中创建了一个简单的侧边栏，它比浏览器窗口大，因此显示了滚动条：

  #sidebar 
     {
	 display: table;
	 width: 450px;
	 padding: 10px;
	 vertical-align: none;
	 margin: 15px 0 0 0;
	 text-decoration: none;
	 background-color: #757575;   
     }

    <body>
    <div id="sidebar">
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>   <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
 
     </div>

如果没有出现滚动条，只需再添加几行即可。

现在我的问题是，当滚动条出现时，它总是出现在浏览器的右侧，而不是直接出现在侧栏。

我找到了很多可能的解决方案，这些尝试了，例如： -将溢价y设置为所有可能的值 -将“ display”参数更改为所有可能的值（包括flex，Inherit，inline-table） -设置最大宽度

它看起来像系统始终假定侧边栏在整个屏幕上伸展，因为在使用display：inherit值时，它确实可以做到这一点

我也无法弄清楚如何调整边栏的大小，因此用户可以像使用普通窗口一样更改宽度，我假设这些问题都已连接。

您有没有尝试过的想法吗？我知道一种解决方案是使用框架，但也听说那些框架已经很少使用了，并且在尝试发生其他问题时也是如此

Answer 1

首先，如果不将li标签包装到ul标签中，就无法使用。

例如：

<ul>
  <li>content</li>
  <li>content</li>
  <li>content</li>
</ul>

参考：https://www.w3schools.com/tags/tag_ul.asp

我想您想实现这样的目标。请参考下面的代码

<div class="container">
    <div class="main">
        Give this area width as 70% using css
    </div>
    <div class="sidebar">
        Give this area width as 30% using css
    </div>
</div>

创建侧边栏-滚动条显示问题-HTML / CSS

1 个答案: