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并像示例一样显示块，要重现它，您必须将浏览器窗口的大小调整为250px ..

<强>更新

包裹您的跨度和输入，在div内，div默认显示块....

@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>

如何在一行中为小屏幕制作元素？

1 个答案: