输入和div替换内联项

Question

出于某种原因，当使用div和输入组合时，下一个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>

Answer 2

您将内联设置为＆＃34;（默认值：50）＆＃34;而不是＆＃34; Snap to Grid＆＃34;。如果您移动＆＃34;（默认值：50）＆＃34;的声明;到最后，按钮将内嵌显示到＆＃34; Snap to Grid＆＃34;。

＆＃13;

＆＃13;

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

＆＃13;

<div>
        <header>Object control:</header>
        <div style="display: inline-block;">
            Snap to grid size: 
            <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 style="font-size: 12px;">(default: 50)</div>
</div>    

＆＃13;

＆＃13;

＆＃13;

--- ----更新

＆＃13;

＆＃13;

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

＆＃13;

<div>
        <header>Object control:</header>
        <div style="display: inline-block;">
            Snap to grid size: 
            <div class="inline-flex" style="flex-direction: column">
            <button 
   
                @click="remove_object"
            >   
                Remove
            </button>
       
        </div>
        <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>    

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以vertical-align:top快速修复它。

  div.inline-flex {
    display: inline-flex;
    vertical-align:top;
}