css display buttons in same line with fixed percentage width

问题

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

回答1:

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!

回答2:

Change CSS in jquery CSS code to:

`.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

回答3:

I was just testing this: http://jsfiddle.net/rQ3mh/8/

Please note that this is not a proper way to style it. Just to see if it works

The reason it doesn't work is because once the interface is applied there is no class .buttonleft or .buttonright (Inspect the element to see the class names) Therefore the only way to address those divs is by number. Maybe you should check the documentation around jquery mobile and how to apply class to the interface or at leas inherit it from the <input>

Hope that helps a little.

来源：https://stackoverflow.com/questions/11249888/css-display-buttons-in-same-line-with-fixed-percentage-width

标签

css

button

jquery-mobile

inline