Javascript 使div与text位于同一行，将display:inline块放在何处？ 背景：

我使用一个开/关开关按钮，我希望帮助文本与开关在同一行

现在看起来是这样的：

我希望它看起来像这样：

我在谷歌上搜索到我能成为我的div风格：

display:inline-block;

我的代码：

html{
位置：相对位置；
最小高度：100%；
}
身体{
利润率：0.100px；
/*底部=页脚高度*/
填充：25px；
}
页脚{
背景色：#5B8CA8；
位置：绝对位置；
左：0；
底部：0；
高度：110px；
宽度：100%；
溢出：隐藏；
}
分区upp{
背景色：#5B8CA8；
位置：绝对位置；
左：0；
排名：0；
高度：39px；
宽度：100%；
溢出：隐藏；
}
.ONOFF开关{
位置：相对位置；
宽度：55px；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
}
.onoffswitch复选框{
显示：无；
}
.ONOFF开关标签{
显示：块；
溢出：隐藏；
光标：指针；
边框：2个实心#999999；
边界半径：20px；
}
.ONOFF开关内部{
显示：块；
宽度：200%；
左边距：-100%；
过渡：0秒时，边距为0.3秒；
}
.onoffswitch内部：之前，.onoffswitch内部：之后{
显示：块；
浮动：左；
宽度：50%；
高度：23px；
填充：0；
线高：23px；
字体大小：11px；
颜色：白色；
字体系列：投石机，Arial，无衬线；
字体大小：粗体；
框大小：边框框；
}
.ONOFF开关内部：之前{
内容：“PÅ”；
左侧填充：7px；
背景色：#5B8CA8；
颜色：#FFFFFF；
}
.ONOFF开关内部：之后{
内容：“AV”；
右边填充：10px；
背景色：#EEEEEE；
颜色：#999999；
文本对齐：右对齐；
}
.ONOFF开关{
显示：块；
宽度：15px；
保证金：4倍；
背景：#FFFFFF；
位置：绝对位置；
排名：0；
底部：0；
右：28px；
边框：2个实心#999999；
边界半径：20px；
过渡：所有0.3秒在0秒内轻松过渡；
}
.onoffswitch复选框：选中+.onoffswitch标签.onoffswitch内部{
左边距：0；
}
.onoffswitch复选框：选中+.onoffswitch标签.onoffswitch开关{
右：0px；
}

帮助文本

p和div都应该具有内联块样式

当然，在真实的项目中，我不会使用样式属性，而是使用css类

<p style="display: inline-block">
Help Text
</p>
<div class="onoffswitch" style="display: inline-block">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitchT1" unchecked onclick="javascript:toggle1();">
    <label class="onoffswitch-label" for="myonoffswitchT1">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div>

帮助文本

p和div都应该具有内联块样式

当然，在真实的项目中，我不会使用样式属性，而是使用css类

<p style="display: inline-block">
Help Text
</p>
<div class="onoffswitch" style="display: inline-block">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitchT1" unchecked onclick="javascript:toggle1();">
    <label class="onoffswitch-label" for="myonoffswitchT1">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div>

帮助文本

同时使用

显示：内联块&
垂直对齐：中间p
元素和
.onoffswitch
类上执行code>。这应该会产生预期的效果

演示：


html{
位置：相对位置；
最小高度：100%；
}
身体{
利润率：0.100px；
/*底部=页脚高度*/
填充：25px；
}
p{
显示：内联块；
垂直对齐：中间对齐；
}
页脚{
背景色：#5B8CA8；
位置：绝对位置；
左：0；
底部：0；
高度：110px；
宽度：100%；
溢出：隐藏；
}
分区upp{
背景色：#5B8CA8；
位置：绝对位置；
左：0；
排名：0；
高度：39px；
宽度：100%；
溢出：隐藏；
}
.ONOFF开关{
位置：相对位置；
宽度：55px；
显示：内联块；
垂直对齐：中间对齐；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
}
.onoffswitch复选框{
显示：无；
}
.ONOFF开关标签{
显示：块；
溢出：隐藏；
光标：指针；
边框：2个实心#999999；
边界半径：20px；
}
.ONOFF开关内部{
显示：块；
宽度：200%；
左边距：-100%；
过渡：0秒时，边距为0.3秒；
}
.onoffswitch内部：之前，.onoffswitch内部：之后{
显示：块；
浮动：左；
宽度：50%；
高度：23px；
填充：0；
线高：23px；
字体大小：11px；
颜色：白色；
字体系列：投石机，Arial，无衬线；
字体大小：粗体；
框大小：边框框；
}
.ONOFF开关内部：之前{
内容：“PÅ”；
左侧填充：7px；
背景色：#5B8CA8；
颜色：#FFFFFF；
}
.ONOFF开关内部：之后{
内容：“AV”；
右边填充：10px；
背景色：#EEEEEE；
颜色：#999999；
文本对齐：右对齐；
}
.ONOFF开关{
显示：块；
宽度：15px；
保证金：4倍；
背景：#FFFFFF；
位置：绝对位置；
排名：0；
底部：0；
右：28px；
边框：2个实心#999999；
边界半径：20px；
过渡：所有0.3秒在0秒内轻松过渡；
}
.onoffswitch复选框：选中+.onoffswitch标签.onoffswitch内部{
左边距：0；
}
.onoffswitch复选框：选中+.onoffswitch标签.onoffswitch开关{
右：0px；
}

帮助文本

同时使用
显示：内联块&
垂直对齐：中间p
元素和
.onoffswitch
类上执行code>。这应该会产生预期的效果

演示：


html{
位置：相对位置；
最小高度：100%；
}
身体{
利润率：0.100px；
/*底部=页脚高度*/
填充：25px；
}
p{
显示：内联块；
垂直对齐：中间对齐；
}
页脚{
背景色：#5B8CA8；
位置：绝对位置；
左：0；
底部：0；
高度：110px；
宽度：100%；
溢出：隐藏；
}
分区upp{
背景色：#5B8CA8；
位置：绝对位置；
左：0；
排名：0；
高度：39px；
宽度：100%；
溢出：隐藏；
}
.ONOFF开关{
位置：相对位置；
宽度