在固定百分比宽度同一行CSS显示按钮 [英] css display buttons in same line with fixed percentage width
问题描述
我需要使用jQuery移动和code显示2个按钮是在这里：的http：/ /jsfiddle.net/kiranj/rQ3mh/3/
不过，我需要确保
1）第一个按钮是左对齐，有40％的固定的宽度和
2）第二个按钮是右对齐，有40％的固定宽度
好像我缺少实现这一看似简单的功能，一些重要的事情。鸭preciate任何帮助
有关参考，在这里是code：
HTML：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆gt;我的页面＆LT; /标题＆GT;
＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1＆GT;
＆LT;链接rel =stylesheet属性HREF =HTTP：//$c$c.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css/＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/jquery-1.7.1.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT;
＆LT;身体GT; ＆LT; BR /＆GT;＆LT; BR /＆GT;＆LT; BR /＆GT;
＆LT; DIV数据角色=fieldcontain＆GT;
＆LT;输入类型=提交名称=同意数据内嵌=真正的数据角落=false的数据主题=BID =pageptosagreeVALUE =同意/＆GT;
＆LT;输入类型=提交数据内嵌=真正的数据角落=假名称=notAgreeID =pagetosdonotagreeVALUE =我不同意/＆GT;
＆LT; / DIV＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;
下面是CSS：
div.divinput的div {
溢出：隐藏;
}div.divinput div.buttonleft的div {
宽度：40％;
浮动：左;
}div.divinput div.buttonright的div {
浮动：权利;
宽度：40％;
}.clear {
明确：两者;
}
如果您添加/覆盖原来是 jquery.mobile-1.1.0.min.css 我想你会得到你想要的结果。试试下面的code：
CSS
的.ui-BTN {
宽度：40％;
}的.ui-BTN-UP-C，
的.ui-BTN-悬停-C {
浮动：权利;
}
HTML
＆LT; DIV数据角色=fieldcontain＆GT;
＆LT;输入类型=提交名称=同意ID =pageptosagree数据内嵌=真正的数据角落=false的数据主题=b的值=同意/＆GT;
＆LT;输入类型=提交名称=notAgreeID =pagetosdonotagree数据内嵌=真正的数据角落=假值=我不同意/＆GT;
＆LT; / DIV＆GT;
希望它可以帮助你！
I need to display 2 buttons using jquery mobile and the code is here: http://jsfiddle.net/kiranj/rQ3mh/3/
However, I need to make sure 1) first button is left aligned, has a fixed width of 40% and 2) second button is right aligned, has a fixed width of 40%
Seems like I am missing some important thing in achieving this simple looking functionality. Appreciate any help
For reference, here is the code: 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>
Here is the 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;
}
If you add/overwrite some CSS properties that originally are in jquery.mobile-1.1.0.min.css i think you will get the result you want. Try the below code:
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>
Hope it can help you!
这篇关于在固定百分比宽度同一行CSS显示按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
