Question

我有使用查询移动版1.4.4开发移动页面的代码。但问题是我想把标签，输入框和一个小搜索图像放在一行。标签和输入框正确地在一行中出现，但图像将在下一行中出现。以下是我的代码。

＆＃13;

<div data-role="fieldcontain">
    <label id="Nationalitylbl">*Nationality:</label>
    <input type="text" name="Nationality" id="Nationality" value="" style="width:80%" readonly/>
    <img src="%bind(:13)" name="Ntlylkp" onclick="nationalityPopUp();"/>          		
</div>

＆＃13;

Answer 1

从输入字段中删除或减少内联style="width:80%"。

Answer 2

将float left设置为图像输入并标记

.nationality .ui-corner-all input {
    padding-right: 100px; /* width of image */
}
.nationality img {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="fieldcontain" class="nationality">
    <label id="Nationalitylbl">*Nationality:</label>
    <input type="text" name="Nationality" id="Nationality" value="" style="width:100%" readonly/>
    <img src="%bind(:13)" name="Ntlylkp" onclick="nationalityPopUp();"/>          		
</div>

Answer 3

只需减小文本字段的宽度并相应地设置图像宽度。试试这段代码 -

<div data-role="fieldcontain">
    <label id="Nationalitylbl">*Nationality:</label>
    <input type="text" name="Nationality" id="Nationality" value="" style="width:40%" readonly/>
    <img src="%bind(:13)" width="200px" name="Ntlylkp" onclick="nationalityPopUp();"/>                  
</div>

如何将标签，输入框和小搜索图像放在一行？

3 个答案: