首先:很抱歉,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⋅2<sup>3</sup> + 0⋅2<sup>2</sup> + 1⋅2<sup>0</sup> + 1⋅2<sup>-1</sup> + 0⋅2<sup>-2</sup> + 1⋅2<sup>-3</sup></li>
<li>= 1⋅8 + 1⋅4 + 0⋅2 + 1⋅1 + 1⋅<sup>1</sup>/<sub>2</sub> + 0⋅<sup>1</sup>/<sub>4</sub> + 1⋅<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⋅16<sup>3</sup> + 2⋅16<sup>2</sup> + C⋅16<sup>1</sup> + 7⋅16<sup>0</sup> + B⋅16<sup>-1</sup> + 2⋅16<sup>-2</sup></li>
<li>= F⋅4096 + 2⋅256 + C⋅16 + 7⋅1 + B⋅<sup>1</sup>/<sub>16</sub> + 2⋅<sup>1</sup>/<sub>256</sub></li>
<li>= 15⋅4096 + 2⋅256 + 12⋅16 + 7⋅1 + 11⋅<sup>1</sup>/<sub>16</sub> + 2⋅<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>
&#13;
答案 0 :(得分:0)
这应该有点帮助,通常你可以用“overflow-x:scroll;”在x方向添加溢出,但是我不确定这是否正常。 但是代码的顺序在这里很重要,所以要像这样使用它应该会更好一些。 (同样在Responsiv ist es jetzt schon besser,aber um das perfekt zu machen,dauert das noch einbisschenlä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;
}
}
答案 1 :(得分:0)
所以我现在发现了这个问题。 “UebersichtGWrapper”仍然显示为一张桌子。现在我改变了这个显示:block;它是固定的。