Question

您好，我正在尝试使用电子为i3wm开发状态栏。
Electronjs使用的是Chrome渲染引擎，因此我的网页应该像在Chrome中一样进行渲染。
我想设计UI，但是当一个div正确放置而第二个垂直放置时遇到了奇怪的行为。

为什么要这样做以及如何解决？

这是我的代码：

HTML：

<div class="module slide slide-right">
    <div class="hover-icon">
        <i class="material-icons">power_settings_new</i>
    </div>
    <div class="slider">
        <a href="" class="action">
            <i class="material-icons">settings_backup_restore</i>
            <span class="action-label"> Restart</span>
        </a>
        <a href="" class="action">
            <i class="material-icons">power_settings_new</i>
            <span class="action-label"> Wyłącz</span>
        </a>
    </div>
</div>

CSS：

* {
  user-select: none;
  box-sizing: border-box;
}

body {
  color: #ccc;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 300;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-color: #181818;
}

p {
  margin: 0;
}

a {
  text-decoration: none;
  color: #ccc;
}

a:hover {
  color: #fff;
}


.module {
  height: 50px;
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  background-color: green;
}

.slide .hover-icon {
  display: inline-block;
  padding: 13px;
  height: 50px;
  width: 50px;
  background-color: blue;
}

.slide .slider {
  display: inline-block;
  height: 50px;
  background-color: red;
}

https://codepen.io/bulion121/pen/vbBaJM

Answer 1

这里有两个问题：

1）浏览器将空格和空格解释为单个空格字符。也就是说，当浏览器看到以下内容时：

<div>
  a
</div>
<div>
  b
</div>

...它将在这两个div之间插入' '。有几种方法可以解决此问题，包括在父容器上设置font-size: 0，使用float，使用flexBox以及像这样编写HTML：

<div>
  a
</div><div>
  b
</div>

我个人想带一个弹性盒。

2）因为#hover-icon和#slider是inline-block，所以它们受vertical-align的影响。在父级div上，设置vertical-align: top。

CSS奇怪的div移位

1 个答案: