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

时间:2017-04-21 23:30:23

标签: html css scroll

首先:很抱歉,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>
&#13;
&#13;
&#13;

2 个答案:

答案 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;它是固定的。