Question

是否可以使用JQuery Mobile水平设置文本框和按钮？

使用data-inline="true"适用于按钮，但不适用于按钮和文本框。

数据内联example

data-type="horizontal"也无效。

<!DOCTYPE html> 
<html> 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title></title> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>
<script type="text/javascript">

   $(document).ready(function(){

           $("#clearMeClearMe").click(function(){
               //$(this).hide();
               $("#clearMe22").val("");
           });
});
</script>
<body> 


<div data-role="page">
    <div data-role="header">
        <h1>Textbox Clear Demo</h1>
    </div><!-- /header -->

    <div id="content">
        <input type="text" id="clearMe22" data-inline="true" name="clearMe22"/>    
            <a href="#" data-role="button" data-icon="delete" 
                      data-iconpos="notext" id="clearMeClearMe">Clear</a>
    </div>
</div><!-- /page -->
</body>
</html>

Answer 1

当我向右浮动按钮并限制文本输入的宽度时，似乎最适合我：

<span>
            <input style="width:90%;display:inline-block" type="text" id="clearMe22" data-inline="true" name="clearMe22" />    
            <a style="float:right" href="#" class="ui-input-clear" data-role="button" data-icon="delete" 
                      data-iconpos="notext" id="clearMeClearMe">Clear</a>
</span>

http://jsfiddle.net/xeyyr/1/

但其他人可能能够提供更优雅的CSS解决方案。

Answer 2

我正在尝试为自定义按钮找到类似的解决方案，但在您的情况下，我相信您可以使用内置方法进行数据清除（'data-clear-btn'）。你可以在这里找到这个：

http://jquerymobile.com/demos/1.3.0-rc.1/docs/demos/widgets/textinputs/

看起来像是：

<input data-clear-btn="true" name="text-3" id="text-3" value="" type="text">

水平放置文本框和按钮

2 个答案: