html - 如何在 ul 中滚动一行但保持宽度

Question

首先:抱歉 html 和 css 代码是德语的，但我来自德国^^"所以我创建了一个表格，里面有一些方程式。我希望等式在移动设备上只出现在一行中，这样它就可以很好地阅读。但是当我使用 white-space:nowrap 执行此操作时，它会使整个表格在屏幕上流动。你对如何只使那一行可滚动有任何帮助吗？

/* Body */
body    {
	font-family: 'Open Sans', sans-serif;
	font-style: normal;
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	background-image: url(../Bilder/Linien.png);
	background-repeat: repeat;
	background-attachment: scroll;
	background-color: #D7D7D7;
	overflow-x: hidden;
}

/* Mobile Settings */

@media (max-width: 800px)	{

	body	{
		background-image: none;
  }

	body .Gleichung	{
		line-height: 1.5;
		white-space: nowrap;
	}
}

.UebersichtGWrapper	{
	display: table;
	width: 100%;
}

/* Table */

.UebersichtG	{
	position: relative;
	display: inline-block;
	width: 45%;
	margin: 2%;
	padding: 0;
	float: left;
	border: 1px black solid;
}

.BoxG	{
	width: auto;
	text-align: center;
	margin: 0;
}

.BoxTitel	{
	position: relative;
	font-size: 18px;
	font-weight: 600;
	background-color: #D7D7D7;
	border-bottom: 1px solid;
}

.UebersichtG li	{
	margin: 0;
	list-style: none;
	margin-left: -40px;
	padding: 20px 20px;
	overflow: scroll;
}

.UebersichtG li::-webkit-scrollbar	{
	display: none;
}

.Fett	{
	font-weight: 600;
}

.Gleichung	{
	text-align: left;
	line-height: 0.1;
	border-top: 1px solid;
	border-bottom: 1px solid;
}

<div class="UebersichtGWrapper">
              			<div class="UebersichtG">
			  				<ul class="BoxG">
						  		<li class="BoxTitel">Dualzahlen bzw. Binärzahlen (Basis = 2)</li>
						  		<li>b=2, also gibt es nur die beiden Ziffern 0 und 1</li>
						  		<li>
									<ul class="Gleichung">
										<li class="Fett">1101,101</li>
										<li>= 1&sdot;2<sup>3</sup> + 0&sdot;2<sup>2</sup> + 1&sdot;2<sup>0</sup> + 1&sdot;2<sup>-1</sup> + 0&sdot;2<sup>-2</sup> + 1&sdot;2<sup>-3</sup></li>
										<li>= 1&sdot;8 + 1&sdot;4 + 0&sdot;2 + 1&sdot;1 + 1&sdot;<sup>1</sup>/<sub>2</sub> + 0&sdot;<sup>1</sup>/<sub>4</sub> + 1&sdot;<sup>1</sup>/<sub>8</sub></li>
									</ul>
								</li>
						  		<li>Da die Positionen von Zweierpotenzen gebildet werden, heißen sie Zweier, Vierer, Achter bzw. Halbe, Viertel usw. Die Zugehörigkeit zu den Dualzahlen kennzeichnet man oft mit einem Index: 1101,1012<sub>2</sub></li>
							</ul>
			  			</div>
              			<div class="UebersichtG">
			  				<ul class="BoxG">
						  		<li class="BoxTitel">Hexadezimalzahlen (Basis = 16)</li>
						  		<li>b=16, hier gibt es 16 Ziffern. Da wir nur 10 Ziffern kennen und jede Ziffer nur aus einem Symbol bestehen darf, setzt man nach der Ziffer 9 mit Buchstaben fort. Ziffern: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F</li>
								<li>
									<ul class="Gleichung">
										<li class="Fett">F2C7,B2</li>
										<li>= F&sdot;16<sup>3</sup> + 2&sdot;16<sup>2</sup> + C&sdot;16<sup>1</sup> + 7&sdot;16<sup>0</sup> + B&sdot;16<sup>-1</sup> + 2&sdot;16<sup>-2</sup></li>
										<li>= F&sdot;4096 + 2&sdot;256 + C&sdot;16 + 7&sdot;1 + B&sdot;<sup>1</sup>/<sub>16</sub> + 2&sdot;<sup>1</sup>/<sub>256</sub></li>
										<li>= 15&sdot;4096 + 2&sdot;256 + 12&sdot;16 + 7&sdot;1 + 11&sdot;<sup>1</sup>/<sub>16</sub> + 2&sdot;<sup>1</sup>/<sub>256</sub></li>
									</ul>
								</li>
								<li>Da die Positionen hier von 16er-Potenzen gebildet werden, heißen sie hier Einer, Sechzehner, Zweihundertsechsundfünfziger bzw. Sechzehntel, Zweihundersechsundfünfzigstel usw. Die Zugehörigkeit zu den Hexadezimalzahlen kennzeichnet man oft mit einem Index: F2C7,B216<sub>16</sub></li>
							</ul>
						</div>
		  			</div>

Answer 1

这应该有点帮助，通常你可以使用“overflow-x: scroll;”在 x 方向添加溢出，但我不确定这在这里是否工作正常。但是这里代码的顺序很重要，所以这样用应该会好一点。 (同样在 Responsiv ist es jetzt schon besser, aber um das perfekt zu machen, dauert das noch ein bisschen länger...)

    body    {
        font-family: 'Open Sans', sans-serif;
        font-style: normal;
        font-size: 16px;
        line-height: 1.5;
        margin: 0;
        padding: 0;
        background-image: url(../Bilder/Linien.png);
        background-repeat: repeat;
        background-attachment: scroll;
        background-color: #D7D7D7;
        overflow-x: hidden;
    }

    .UebersichtGWrapper {
        display: table;
        width: 100%;
    }

    /* Table */

    .UebersichtG    {
        position: relative;
        display: inline-block;
        width: 45%;
        margin: 2%;
        padding: 0;
        float: left;
        border: 1px black solid;
    }

    .BoxG   {
        width: auto;
        text-align: center;
        margin: 0;
    }

    .BoxTitel   {
        position: relative;
        font-size: 18px;
        font-weight: 600;
        background-color: #D7D7D7;
        border-bottom: 1px solid;
    }

    .UebersichtG li {
        margin: 0;
        list-style: none;
        margin-left: -40px;
        padding: 20px 20px;
        overflow: scroll;
    }

    .UebersichtG li::-webkit-scrollbar  {
        display: none;
    }

    .Fett   {
        font-weight: 600;
    }

    .Gleichung  {
        text-align: left;
        line-height: 0.1;
        border-top: 1px solid;
        border-bottom: 1px solid;
    }   

    /* Mobile Settings */

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

        body    {
            background-image: none;
      }

        body .Gleichung {
            line-height: 1.5;
            white-space: nowrap;
        }


    .UebersichtGWrapper {
        display: table;
        width: 100%;
    }

    .UebersichtG    {
        position: relative;
        display: inline-block;
        width: 100%;
        margin: 2%;
        padding: 0;
        float: none;
        border: 1px black solid;
        font-size: 14px;
    }

}