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

Question

我甲肝这两个元素：

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

UPDATE

这里是我的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和类似的例子显示块，重现它，你将有你的浏览器窗口大小调整为250像素..

---

UPDATE

包装你的跨度和输入，内格，一个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>