Question

我如何总是总是在一行上获取输入广播和输入文本。当我更改分辨率时，它们不会停留在同一行。

<fieldset>
        <label>
            <input type="radio" name="radio" value="url" <?php checked( $this->options['shortcode_link_type'], 'url' ); ?> />
            <input type="url" name="shortcode_url" class="input-text" value="<?php echo $this->options['shortcode_url']; ?>" />
        </label>
</fieldset>

Answer 1

正如某些人建议的那样，通常在输入中使用单选输入中的float：left样式。

input[type=radio]{
    float:left;
}

但是，由于它的副作用，我不太喜欢在样式中使用“ float”。另外，我认为当您更改分辨率或缩小窗口尺寸时，它不会跳下去。

所以我将在这里写一些替代建议：

您可以在父块中使用flexbox：
```
label{
   display: flex;
}
```
这将迫使两个元素在同一行中，只要您不要使用flex-wrap：wrap属性。但是，尽管flex是如今已广泛使用，它可能与较旧的版本不兼容浏览器。
您可以将无线电输入放置在绝对位置：
```
label{    
    position: relative;
}

input[type=radio]{
    position: absolute;
    right: -20px; 
}
```
这将使收音机始终位于标签后20像素-要使用在这个例子中20是任意的，您应该使用适合的数字您需要的更多，通常是元素的宽度加上一些额外的利润空间。这样做的缺点是无线电输入将变为它自己的实体，如果在此块之后发生了某些情况，则可能会发生在它的顶部。您可以通过下一个建议解决该问题。
使用绝对位置，但在右侧保留适当的填充标签：
```
label{
    position: relative;
    padding-right: 20px; }

input[type=radio]{
    position: absolute;
    right: 0;
}
```
这将解决最后一个方法的缺点。 -记住要适应从20填充到适合您的样式的数字

您可以简单地强制父块不包装及其子块内联：

label {
    word-wrap: no-wrap;
    white-space: nowrap
}

label input{
    display: inline;
}

这3个选项应强制输入不跳到下一行。

Ps：我应该说，我觉得使用标签作为输入的父级很奇怪，更不用说其中的2个了。从语义上讲，标签标签应该描述一种关联的输入功能，并在单击标签时将焦点放在该输入上，而不是包装输入...而且，标签具有的默认样式可能弄乱了输入的默认样式。

Answer 2

您可以float输入字段。

input[type=radio]{
    float:left;
}

input[type=url]{
    float:right;
}

在单行上以不同的分辨率输入广播和输入文本

2 个答案: