Question

我熟悉带有=“my_id”标签和输入类型标签的样式表单。我真的很喜欢它如何自动设置表单组件的样式，如果表单宽度下降到更窄的宽度，我喜欢输入标签保持对齐。

我想做同样类型的样式，除了现在我想要显示一个记录，其中标签及其值的样式类似。

这是我希望可以使用的一些代码，但事实并非如此。

<div data-role="fieldcontain">
    <label for="full_name"><strong>Name:</strong></label>
    <span id="full_name">John Smith</span>
</div>
<div data-role="fieldcontain">
    <label for="phone"><strong>Long Phone Label:</strong></label>
    <span id="phone">(800) 555-1212/span>
</div>

有关正确方法的任何想法，而不诉诸表格吗？

Answer 1

It seems that you want to align the text in the way the form is aligned.The below code will align the labels with their values.This is what i understand from your question.i hope the below code will help you.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="jquery.mobile-1.0rc1.css" />
<script type="text/javascript" src="js/Common/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/Common/jquery.mobile-1.0rc1.js"></script>

<style>
#b {
    left: 156px;
    bottom: 50px;
}

</style>
</head>
<body>
<div data-role="page" id="header">
    <div data-role="fieldcontain" id="a">
    <label for="full_name"><strong>Name:</strong></label><br>
    <label for="phone"><strong>Long Phone Label:</strong></label>
</div>
<div data-role="fieldcontain" id="b">
    <span id="full_name">John Smith</span><br>
    <span id="phone">(800) 555-1212</span>
</div>
</div>
</body>
</html>

Answer 2

也许这会奏效。您可以使用JQM网格执行并排标签：

标签：输入元素标签：输入元素

请注意，因为移动设备的标签是故意的。因此，当您进入像Ihone这样的设备时，您可以看到标签和输入：

<div class="ui-grid-a">
<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div>

在jquery mobile中为标签和值设置样式的推荐方法是什么？

2 个答案: