css - 如何在小屏幕上将元素排成一行？

Question

我有这两个元素:

  <span>ddd:</span>
                            <input type="text" class="ui-state-disabled" name="textinput-hide" id="textinput1" placeholder="Text input" value="">

更新

这是我的 HTML 代码:

<div data-role="page" id="layerProperty">
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1 id="layers property"></h1>
        <a href="#mapPage" data-mini="true" data-icon="arrow-l">back</a>
    </div>

    <div data-role="content">
        <div id="vectorLayerProperties" style="display: none;">
            <fieldset style="border: solid 1px #6b6b6b;">
                <legend>data1</legend>
                <div class="ui-content">
                    <form>
                        <div>
                            <span>ddd:</span>
                            <input type="text" class="ui-state-disabled" name="textinput-hide" id="textinput1" placeholder="Text input" value="">

                            <span>ddd:</span>
                            <input type="text" class="ui-state-disabled" name="textinput-hide" id="textinput2" placeholder="Text input" value="">

                            <span>ddd:</span>
                            <select class="ui-state-disabled" name="select-native-1" id="select-native-1">
                                <option value="1">The 1st Option</option>
                                <option value="2">The 2nd Option</option>
                                <option value="3">The 3rd Option</option>
                                <option value="4">The 4th Option</option>
                            </select>

                            <span>ddd:</span>
                            <select class="ui-state-disabled" name="select-native-1" id="select-native-2">
                                <option value="1">The 1st Option</option>
                                <option value="2">The 2nd Option</option>
                                <option value="3">The 3rd Option</option>
                                <option value="4">The 4th Option</option>
                            </select>
                        </div>

                        <input type="Button" data-inline="true" value="Edit" onclick="editLayerProperty()">
                        <input type="Button" data-inline="true" value="Delete">
                    </form>
                </div>
            </fieldset>
        </div>
        <div id="vectorLayerslist"></div>
    </div>
</div>

带有 id=vectorLayerProperties 的内部元素我有 span 元素和文本框，我想在单行中制作。

对于宽度为 250px 的屏幕，如何将它们排成一行？

Answer 1

使用媒体 queries并像示例一样显示 block ，要重现它，您必须将浏览器窗口的大小调整为 250px..

---

更新

将你的 span 和 input 包裹起来，在 div 中，默认情况下 div 有显示 block ....

@media (max-width: 250px) {
  .span,.input {
    display: block;
  }
}

<span class="span">ddd:</span>
                            <input type="text" class="input ui-state-disabled" name="textinput-hide" id="textinput1" placeholder="Text input" value="">
                            
                            
<div data-role="page" id="layerProperty">
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1 id="layers property"></h1>
        <a href="#mapPage" data-mini="true" data-icon="arrow-l">back</a>
    </div>

    <div data-role="content">
        <div id="vectorLayerProperties" >
            <fieldset style="border: solid 1px #6b6b6b;">
                <legend>data1</legend>
                <div class="ui-content">
                    <form>
                        <div>
                            <span>ddd:</span>
                            <input type="text" class="ui-state-disabled" name="textinput-hide" id="textinput1" placeholder="Text input" value="">
                        </div>
                        <div>
                            <span>ddd:</span>
                            <input type="text" class="ui-state-disabled" name="textinput-hide" id="textinput2" placeholder="Text input" value="">
                        </div>
                        <div>
                            <span>ddd:</span>
                            <select class="ui-state-disabled" name="select-native-1" id="select-native-1">
                                <option value="1">The 1st Option</option>
                                <option value="2">The 2nd Option</option>
                                <option value="3">The 3rd Option</option>
                                <option value="4">The 4th Option</option>
                            </select>
                         </div>
                         <div>
                            <span>ddd:</span>
                            <select class="ui-state-disabled" name="select-native-1" id="select-native-2">
                                <option value="1">The 1st Option</option>
                                <option value="2">The 2nd Option</option>
                                <option value="3">The 3rd Option</option>
                                <option value="4">The 4th Option</option>
                            </select>
                            
                        </div>

                        <input type="Button" data-inline="true" value="Edit" onclick="editLayerProperty()">
                        <input type="Button" data-inline="true" value="Delete">
                    </form>
                </div>
            </fieldset>
        </div>
        <div id="vectorLayerslist"></div>
    </div>
</div>