Question

问题：

我必须缩进我的文字。我遇到了很多问题，所以我现在需要学习如何正确地做到这一点。在桌面版本上缩进看起来很好。问题是，当我从响应的角度看，所有文本都失去控制。这是我现在的版本：

以下是使用下面的CSS在iPhone 5上进行文本缩进后的版本：

代码：

  feature-bar {
    background-color: #f8f8f8;
    height: 200px;
    margin-top: 0px;
    text-decoration: solid;
    color: red;
    text-indent: 100px;
    padding-top: 20px;
}

问题：

如何进行正确的文本缩进，以便在移动设备上看起来正确？

更新

在我找到答案后，我可以使用<li>或vw。从移动的角度来看，时钟13.00 - 13.20应保持在一行，文本应从另一行开始。我应该用媒体查询来解决这个问题吗？

第二次更新

关于它应该如何在移动设备上查看的示例

Answer 1

标准解决方案是使用左边填充。不知道你的HTML是什么样的，但这就像是

ul {
  padding-left: 100px;
  padding-right: 40px;
  outline: 1px solid red;/* just for demo purposes to reveal the padding */
}
li {
  padding-bottom: 20px;
  list-style: none;
}

<p>Heading</p>
<ul>
  <li>first item, showing what it looks like when an item wraps to more than one line asdf asdf asdf asdf sdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf</li>
  <li>qwer</li>
</ul>

如果你想在列表周围留出额外的垂直空间，你可以做两件事之一。在这里，我将总空间放在ul 30px

的底部

ul {
    padding-bottom: 10px;/* is in addition to the 20px from the last li */
}

或

ul {
    padding-bottom: 30px;
}
li:last-child {
    padding-bottom: 0;
}

（第二个选项可以更可靠：您不必考虑数学，并且在网站上工作的人不必记住/知道最后li提供填充。在这样一个简单的案例中没什么大不了的，但在css更多参与的情况下要记住这一点很有用）

无论你做什么，你可能都想做.some-class-name和.some-class-name li而不是我的例子中的ul和li - 否则这样做将为您网站上的每个列表添加样式！

请注意，我使用底部填充而不是顶部 - 这不是绝对必要的，但我发现有利于底部填充和底部边缘（而不是顶部）是一个良好的习惯。知道间距几乎肯定来自上层事物可以使事情更容易调试和/或调整

加成

在您对问题进行更新之后：在移动设备上将时间放在自己的行上的一种方法：将时间换成一些在桌面上显示内联并在移动设备上阻止的元素。默认情况下，span为display: inline，这使其成为一个方便的选择。通用的解决方案是

<li>
    <span>mobile own line</span> other stuff
</li>

@media (max-width: yyypx) {
    span {
        display: block;
    }
}

yyy是你的移动断点。同样，那可能是.some-class-name span。

因为这是一个时间值，所以time元素可以是完美的语义：

<li><time datetime="13:00/13:30">13:00&ndash;13:30<time> other stuff</li>

然后定位css中的time（参见http://www.w3schools.com/tags/att_time_datetime.asp和https://stackoverflow.com/a/10403376/1241736）

Answer 2

而不是像素，使用视口单元，特别是使用vw，viewport width随着屏幕宽度变小而减小

在此处查看更多CSS Units

请参阅以下代码段：

或者更好地看到这里＆gt; jsfiddle （您可以更好地调整大小）

.feature-bar {
    background-color: #f8f8f8;
    height: 200px;
    margin-top: 0px;
    text-decoration: solid;
    color: red;
    text-indent: 10vw;
    padding-top: 20px;
}

<div class="feature-bar">
Lorem ipsum dolor sit amet, aenean sed egestas ultricies eget ornare, luctus proin malesuada. A ac lacinia. Vulputate molestie suspendisse nullam. Ornare velit ac vitae, duis duis, ac diam pede netus. Ipsum nibh ipsum, phasellus id quis vitae consectetuer blandit dolor. 
</div>
<div class="feature-bar">
Nec nulla placerat aliquam nulla urna tellus, ac ligula imperdiet, facilisis laoreet nec egestas, porttitor ante, wisi blandit sit erat. Vestibulum fermentum ac. Amet augue, mattis nec integer lorem lorem. Neque enim, pulvinar leo lorem donec, ac in. Etiam nec vestibulum justo praesent mi, pharetra praesent erat enim et purus sed, vel porttitor morbi voluptatem ante pellentesque ligula. In interdum tellus elit volutpat, purus gravida vitae vivamus ante quis, at amet, urna scelerisque suspendisse quis tortor vestibulum.
</div>

在您修改问题后更新。

使用清单：

小心，ul有一个默认填充，将其更改为padding-left:5vw，以便在调整窗口大小时变小;

请参阅下面的代码段或在此处摆弄： jsfiddle with list

ul {padding-left:5vw}
br { display:none;} /* if you want all content of `li` to be on same row , time and text */

@media only screen and (max-width: 767px) { /* mobile devices */
  
  br { display:block; } /* time on one row, text on the next rows */
  }

<h1>
program for seminar
</h1>

<ul>
  <li>13.00 - 13.30 <br />
Lorem ipsum dolor sit amet, non leo arcu risus fermentum at quam. Ac tincidunt vel non, quisque at libero odio ac eu sed, lectus condimentum non scelerisque tortor ligula.
</li>
  <li >14.00 - 14.30<br />
Consectetuer diam consequat cursus fusce odio, fusce lacinia quis sit, sed etiam consequat pulvinar. Ut nisl, sed vulputate, dui ut pede varius in aenean, blandit accumsan pellentesque.
</li>
</ul>

Answer 3

这是因为text-indent仅适用于新规则。在手机的例子中，规则被破坏，因此，转到div的开头。

将text-indent: 100px更改为padding-left: 100px

如果您有其他内容不应该对齐，请将内容包装在span / div中并将样式应用于此元素。

Answer 4

这是表格数据。只需使用一个表，它的语义，只需要很少的维护或媒体查询。

＆＃13;

table {
  width: 80%;
  margin: auto;
  color: red;
}
table tr td {
  vertical-align: top;
}
table tr td:first-child {
  white-space: nowrap;
}

＆＃13;

<table>
  <tr>
    <td>11:30 - 12:30</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, nihil nam veniam perferendis facilis error.</td>
  </tr>
  <tr>
    <td>12:30 - 13:30</td>
    <td>Lorem ipsum dolor sit amet.</td>
  </tr>
  <tr>
    <td>13:30 - 14:30</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, nihil!</td>
  </tr>
</table>

＆＃13;

正确的css文本缩进符号

4 个答案:

加成