Question

问题标题可能不是最好的，因为我无法弄清楚如何说出来。

我用webflow创建了一个快速网站，一旦我导出代码，我发现了一个奇怪的问题。我无法弄清问题可能是什么。

压缩HTML代码时，布局很好，但是当你对其进行格式化（缩进，间距等）时，布局会发生变化。

我已经包含了整个代码。如您所见，导航栏按原样呈现在一行中。但是，如果您尝试格式化html（在此整理），它将在每个导航栏元素周围添加一些填充。

如果在每个链接后添加空格

<a class="w-inline-block navigation-section primero"><div class="navigation-text">En 2D</div></a>

它在栏中渲染一个空格，将其余部分推到下一行。

Answer 1

这是预期的行为。源代码中的换行符将呈现为HTML中的空格。

将在两个<div />：

之间插入空格的示例

<div>
  Content
</div>
<div>
  Other content
</div>

为了避免这种情况，您可以缩小HTML或使用以下语法：

<div>
  Content
</div
><div>
  Other content
</div>

Answer 2

当您的导航代码不是一条连续线时，导航中的

inline-block元素之间会有间距。这种格式虽然令人不愉快。在你的例子中，我只想添加：

.w-inline-block {
  float: left;
}

Article on subject.

＆＃13;

.w-inline-block {
  float: left;
}

＆＃13;

<html data-wf-site="560fb42cfb4cea064e6a9703" data-wf-page="560fb42cfb4cea064e6a9704">
  <head>
    <meta charset="utf-8">
    <title>guerrarte</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="generator" content="Webflow">
    <link rel="stylesheet" type="text/css" href="https://daks2k3a4ib2z.cloudfront.net/560fb42cfb4cea064e6a9703/css/guerrarte.webflow.5a2acd60c.css">
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
    <script>
      WebFont.load({
        google: {
        families: ["Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic","Merriweather:300,400,700,900"]
        }
      });  
    </script>
    <script type="text/javascript" src="https://daks2k3a4ib2z.cloudfront.net/0globals/modernizr-2.7.1.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="https://daks2k3a4ib2z.cloudfront.net/img/favicon.ico">
    <link rel="apple-touch-icon" href="https://daks2k3a4ib2z.cloudfront.net/img/webclip.png">
  </head>
  <body>
  <div class="body-wrapper">
    <div class="w-section w-clearfix website-header">
      <div class="header-containerimage">
        <div class="header-manolin-image"></div>
      </div>
      <div class="header-container-text">
        <div class="header-manolin-text">Manuel Dominguez Guerra</div>
        <div class="header-text-descripcion">
          Aenean pulvinar semper finibus. Donec faucibus quam arcu, quis tincidunt mauris viverra quis. Duis rutrum convallis velit ac imperdiet. Aliquam luctus nulla quis feugiat dignissim. Aliquam iaculis in eros id fermentum.
        </div>
      </div>
    </div>
    <div class="w-section navigation-bar">
      <a class="w-inline-block navigation-section primero">
        <div class="navigation-text">En 2D</div>
      </a>
      <a class="w-inline-block navigation-section segundo" href="#">
        <div class="navigation-text">En 3D</div>
      </a>
      <a class="w-inline-block navigation-section tercero" href="#">
        <div class="navigation-text">Pinceladas</div>
      </a>
      <a class="w-inline-block navigation-section cuarto" href="#">
        <div class="navigation-text">Blog</div>
      </a>
      <a class="w-inline-block navigation-section quinto" href="#">
        <div class="navigation-text">Biografía</div>
      </a>
    </div>
    <footer class="w-section footer">
      <a class="w-inline-block" href="mailto:arte@guerrarte.com">
        <div class="footer-text">arte@guerrarte.com</div>
      </a>
    </footer>
  </div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://daks2k3a4ib2z.cloudfront.net/560fb42cfb4cea064e6a9703/js/webflow.972a0ffa2.js"></script>
<!--[if lte IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
</body>
</html>

＆＃13;

在HTML代码上添加空间正在改变布局

2 个答案: