引导程序中的空白标签

Question

我正在尝试实现与附件图像相似的布局。 它看起来不错，并且可以在浏览器中显示出来，但是在移动/平板电脑上测试时，p标签的间距最终无法正确显示-我认为这是由于我在我的显示器上使用了硬编码宽度span标签和p标签占据多于一行。

是否可以以响应方式获得附加的图像布局？ 如果是这样，我该怎么做？

我尝试使用％和EM代替px，结果相似。

到目前为止，我编写的HTML是：

         <h2>Lorem Ipsum </h2>  
    <p>
        <span style="display:inline-block; width: 50px;"></span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
    </p>
    <p>
        <span style="display:inline-block; width: 100px;"></span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
    </p>
    </br>
    <h4>
       <span style="display:inline-block; width: 200px;"></span>           
        or
    </h4>
    </br>
    <p>
        <span style="display:inline-block; width: 50px;"></span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat
    </p>
    <p>
        <span style="display:inline-block; width: 100px;"></span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.
    </p>
    </br>

    <h2>
        <span style="display:inline-block; width: 550px;"></span>
        Lorem Ipsum
    </h2>
    <p>
        <span style="display:inline-block; width: 600px;"></span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet, consectetur adipiscing elit. Curabitur 
    </p>
    <p>     
    <span style="display:inline-block; width: 663px;"></span>
    Lorem Ipsum
    </p>
    <p>
        <span style="display:inline-block; width: 650px;"></span>
        Lorem ipsum dolor sit amet  
    </p>

Answer 1

首先，您最好按照这种方式实现与所需目标类似的目标：

 .indent-1 { margin-left: 2.5%; } .indent-2 { margin-left: 5%; } .indent-3 { margin-left: 7.5%; } .indent-4 { margin-left: 10%; } .indent-5 { margin-left: 12.5%; } .indent-6 { margin-left: 15%; } .indent-7 { margin-left: 17.5%; } .indent-8 { margin-left: 20%; } .indent-9 { margin-left: 22.5%; } 

 <h2>Lorem Ipsum </h2> <p class="indent-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p> <p class="indent-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p> <h4 class="indent-3">or</h4> <p class="indent-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat</p> <p class="indent-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper volutpat.</p> <h2 class="indent-6">Lorem Ipsum</h2> <p class="indent-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet, consectetur adipiscing elit. Curabitur</p> <p class="indent-8">Lorem Ipsum</p> <p class="indent-9">Lorem ipsum dolor sit amet</p> 

使用LESS的CodePen： http ://codepen.io/anon/pen/MweYma使用CSS的JSFiddle： https ：//jsfiddle.net/c80p3pyx/1/

如果您需要确保段落不换行，只需添加

p { white-space: nowrap; }

到您的CSS。 这样，您的段落将始终停留在一行中，但是不适合屏幕宽度的行将导致浏览器显示（或至少提供）水平滚动条，几乎在所有情况下都希望避免这种情况。 “过长”段落的唯一其他选择是缩短文本或使用较小的字体。