html – 如何插入在换行符时消失的大空间？

2019年7月21日 216次阅读

我正在开发一个网站,我有一个集中的标题,其中包含机场的图像上方的机场名称和代码.

《html – 如何插入在换行符时消失的大空间？》

我有一个由em空间隔开的机场名称和代码：

div.terminal-silhouette-container h3 {
	text-align: center;
}

div.terminal-silhouette-links {
	text-align: center;
	margin-top: 5px;
	margin-bottom: 40px;
}

div.terminal-silhouette-preview {
	max-width: 500px;
	padding: 0;
	margin: 0 auto;
}

img.terminal-silhouette-preview {
	border: 1px solid $color-border;
}
<div class="col-lg-6 terminal-silhouette-container">
  <h3>Orlando (International)&emsp;MCO</h3>
	<div class="terminal-silhouette-preview">
      <a href="files/terminal-silhouettes/png/MCO.png">
        <img class="img-responsive terminal-silhouette-preview" src="/assets/projects/terminal-silhouettes/MCO.png" alt="MCO" />
      </a>
    </div>
  <div class="terminal-silhouette-links"><a href="files/terminal-silhouettes/png/MCO.png">png</a> &middot; <a href="files/terminal-silhouettes/svg/MCO.svg">svg</a></div>
</div>

这在我的大屏幕上完全按照我想要的方式工作,但当我在一个较窄的手机屏幕上时,标题会包含.包装对我来说不是问题,但由于em空间,其中一条线最终出现在偏离中心的位置：

《html – 如何插入在换行符时消失的大空间？》

在HTML或CSS中是否有一种方法可以让浏览器像普通空间一样处理em空间 – 也就是说,如果它位于一行的末尾,则忽略它(用于居中文本)？

最佳答案 您可以在一个范围中包装该名称,然后给它左边的边距让我们说20 px然后在较小的屏幕上你可以做一个媒体查询来删除边距.

span{
    margin-left: 20px;
}
@media screen and (max-width: 500px) {
    span{
        margin-left: 0;
    }
}
点赞