当我在<span>和<input>之间添加空格时，<input>将进入chrome的下一行

Question

所有内容均在此代码和框中 https://codesandbox.io/s/static-31poq

不同的浏览器的行为也不同。

这是屏幕截图

chrome

firefox

我知道该如何解决。我担心的是造成这种情况的原因。

#include

def toggle():
    global tog, exit
    exit = False
    tog = tog + 1

    if tog == 1:
        watch()
    elif tog == 2:
        stop()
        tog = 0


def watch():
    global sec
    global hour
    global mins
    global exit

    sec = sec + 1
    l1.config(text=sec)
    if not exit:
        l1.after(1000,watch)

Answer 1

和之间有空格。删除空格，它将显示为一行。谢谢

Answer 2

您的.wapper宽度导致该问题尝试增加.wapper宽度。由于不同的浏览器css预设而发生此问题。不同的浏览器具有不同的默认CSS预设，因此默认渲染会有所不同。要解决此问题，可以使用css normalize样式表或rest样式表。但是规范化样式表和重置样式表具有不同的行为。

1. 标准化样式表：https://necolas.github.io/normalize.css/
2. 重置样式表：https://meyerweb.com/eric/tools/css/reset/

.wrapper {
    width: 110px;
    display: flex;
}

.number {
  width: 70px;
  margin-right: 10px;
}

<div class="wrapper">
  <div class="container">
    <!-- There is no space. Thus the input is in the same line. -->
    <span class="plus">+</span><input class="number" value="1"></input>
  </div>
</div>
<hr/>
<div class="wrapper">
  <div class="container">
  <!-- There is a space. Thus the input comes to the next line.-->
  <span class="plus">+</span> <input class="number" value="1"></input>
</div>

Chrome：

Firefox：