Question

我需要始终并排放置一个文本字段和一个按钮。逻辑是这样的 - 按钮将始终位于屏幕的右侧。文本字段应占据左侧宽度的其余部分我尝试给textfield一个特定的％宽度。但是我必须同时支持android和iOS设备。所以它们之间存在不同屏幕尺寸的问题，并且该解决方案不适用于所有屏幕尺寸。这是代码我用过

<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>

<body>
    <div data-role="page">
        <div data-role="content">
        <div style="display:inline;">
            <input type="text" placeholder="Enter your user name"></input>
            <a href="#" data-role="button" data-inline="true" class="normalBtn" style="margin-top:0px">Check</a>
        </div>
        </div>
    </div>
</body>
</html>

在这里演示 - http://jsfiddle.net/d7T4E/

Answer 1

我不确定，但你可以试试这个：

<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>

<body>
    <div data-role="page">
        <div data-role="content">
        <div style="display:inline;">
            <input type="text" style="width:50% !important; float:left;" placeholder="Enter your user name"></input><a href="#" data-role="button" data-inline="true" class="normalBtn" style="margin-top:0px; float:left;">Check</a>
        </div>
        </div>
    </div>
</body>
</html>

在同一行中并排对齐文本字段和按钮

1 个答案: