Question

我需要使用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; 
}

Answer 1

将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;
}`

You can find the Jquery CSS that you are using here

Answer 2

如果您添加/覆盖最初位于jquery.mobile-1.1.0.min.css的某些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>

希望它可以帮到你！

Answer 3

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

请注意，这不是一种合适的方式。只是看它是否有效

它不起作用的原因是因为一旦应用了接口，就没有类.buttonleft或.buttonright（检查元素以查看类名）因此，解决这些div的唯一方法是按编号。也许你应该查看jquery mobile周围的文档以及如何将类应用到接口或者leas从<input>

继承它

希望有所帮助。

css在固定百分比宽度的同一行中显示按钮

3 个答案: