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

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

html css jquery-mobile

Html 在同一行中并排对齐文本字段和按钮,html,css,jquery-mobile,Html,Css,Jquery Mobile,我需要始终并排放置一个textfield和一个按钮。逻辑是这样的：按钮将始终位于屏幕的右侧。textfield应占据左侧的其余宽度。我尝试为textfield指定一个特定的%宽度。但我必须同时支持安卓和iOS设备。因此出现了一个问题它们之间的屏幕大小不尽相同，而该解决方案并不适用于所有的屏幕大小。这是我使用的代码 <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/

我需要始终并排放置一个textfield和一个按钮。逻辑是这样的：按钮将始终位于屏幕的右侧。textfield应占据左侧的其余宽度。我尝试为textfield指定一个特定的%宽度。但我必须同时支持安卓和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>

此处演示-

我不确定，但您可以尝试以下方法：

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

我不确定，但您可以尝试以下方法：

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

谢谢你的回答。但这不是我要找的，因为我希望文本字段除了按钮所需的空间外，能占据整个宽度。谢谢你的回答。但这不是我想要的，因为我希望文本字段占据除按钮所需的空间之外的全部宽度。