1

我需要使用 jquery mobile 显示 2 个按钮，代码在这里：http: //jsfiddle.net/kiranj/rQ3mh/3/

但是，我需要确保 1) 第一个按钮左对齐，固定宽度为 40% 和 2) 第二个按钮右对齐，固定宽度为 40%

似乎我在实现这个简单的功能时遗漏了一些重要的东西。感谢任何帮助

作为参考，这里是代码： HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head> 
<body> 

    <br/><br/><br/>
<div  data-role="fieldcontain">
       <input type="submit" name="agree" data-inline="true" data-corners="false" data-theme="b" id="pageptosagree" value="Agree" />
        <input type="submit" data-inline="true" data-corners="false" name="notAgree" id="pagetosdonotagree" value="I Do Not Agree" />
</div>        

</body>
</html>​

这是CSS：

div.divinput div{
    overflow: hidden;
}

div.divinput div.buttonleft div{ 
    width:40%;
    float:left;
}

div.divinput div.buttonright div {
    float:right;
    width:40%;
}

.clear {
  clear: both; 
}​
4

3 回答 3

2

将 jquery CSS 代码中的 CSS 更改为：

`.ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c {
    float: right;    //just add this single property. Everything will work.
    font-family: Helvetica,Arial,sans-serif;
    text-decoration: none;
}`

您可以在此处找到您正在使用的 Jquery CSS

于 2012-06-29T03:45:37.753 回答
1

如果您添加/覆盖最初存在的一些 CSS 属性，jquery.mobile-1.1.0.min.css我认为您将获得您想要的结果。试试下面的代码：

CSS

.ui-btn{
width:40%;
}

.ui-btn-up-c,
.ui-btn-hover-c{
float:right;
}

HTML

<div data-role="fieldcontain">
    <input type="submit" name="agree" id="pageptosagree" data-inline="true" data-corners="false" data-theme="b" value="Agree" />
    <input type="submit" name="notAgree" id="pagetosdonotagree" data-inline="true" data-corners="false" value="I Do Not Agree" />
</div>

希望它可以帮助你！

于 2012-06-29T03:34:06.993 回答
0

我只是在测试这个：http: //jsfiddle.net/rQ3mh/8/

请注意，这不是设置样式的正确方法。只是看看它是否有效

它不起作用的原因是因为一旦应用了接口，就没有类 .buttonleft 或 .buttonright （检查元素以查看类名）因此解决这些 div 的唯一方法是通过数字。也许您应该查看有关 jquery mobile 的文档以及如何将类应用于接口或至少从<input>

希望能有所帮助。

于 2012-06-28T17:57:54.283 回答