html - input 和 div 替换行内元素

Question

出于某种原因，当结合使用 div 和 input 时，下一个 inline 元素会被替换。请参见下面的示例。

    div.inline-flex {
        display: inline-flex;
    }

<div>
        <header>Object control:</header>
        <div style="display: inline-block;">
            Snap to grid size: 
            <div style="font-size: 12px;">(default: 50)</div>
            <input 
                type="number" 
                value="50" 
                v-model="gridSize" 
                style="width: 50px;"
            /> 
            <button 
                :class="{active: store.state.DrawMap.shouldSnap}" 
                @click="store.commit('drawmap_toggle_snap')"
            >
                Snap
            </button>
        </div>
        <div class="inline-flex" style="flex-direction: column">
            <button 
   
                @click="remove_object"
            >   
                Remove
            </button>
       
        </div>
</div>    

它应该是什么样子

删除按钮应该在 Snap to grid size 行的旁边。

div.inline-flex {
        display: inline-flex;
    }

<div>
        <header>Object control:</header>
        <div style="display: inline-block;">
            Snap to grid size:  
            <button 
                :class="{active: store.state.DrawMap.shouldSnap}" 
                @click="store.commit('drawmap_toggle_snap')"
            >
                Snap
            </button>
        </div>
        <div class="inline-flex" style="flex-direction: column">
            <button 
   
                @click="remove_object"
            >   
                Remove
            </button>
       
        </div>
</div>

input and div were removed

Answer 1

我不确定我是否得到了你想要的输出，但我想是这样的。

div.inline-flex {
  display: inline-flex;
}

<div>
  <header>Object control:</header>
  <div style="display: inline-block; float:left;">
    Snap to grid size:
    <div style="font-size: 12px;">(default: 50)</div>
    <input type="number" value="50" v-model="gridSize" style="width: 50px;" />
    <button :class="{active: store.state.DrawMap.shouldSnap}" @click="store.commit('drawmap_toggle_snap')">
                Snap
            </button>
  </div>

</div>
<div class="inline-flex" style="flex-direction: column;">
      <button @click="remove_object">   
                Remove
            </button>

    </div>