дисплей CSS кнопки в одной линии с фиксированной процентной шириной

мне нужно отобразить 2 кнопки с помощью JQuery мобильного и код здесь: http://jsfiddle.net/kiranj/rQ3mh/3/дисплей CSS кнопки в одной линии с фиксированной процентной шириной

Однако, мне нужно, чтобы убедиться, что 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; 
}

источник

2012-06-28 Kiran

Если вы добавите/перезапишите некоторые свойства 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-29 03:34:06

Я просто тестируем: http://jsfiddle.net/rQ3mh/8/

Пожалуйста, обратите внимание, что это не правильный способ ее стилизации. Просто посмотреть, работает ли это

Причина, по которой она не работает, заключается в том, что после применения интерфейса отсутствует класс .buttonleft или .buttonright (проверьте элемент, чтобы увидеть имена классов). Поэтому единственный способ адресовать эти divs - по числу. Возможно, вам стоит проверить документацию вокруг jQuery mobile и как применить класс к интерфейсу или в leas наследовать его от <input>

Надеюсь, что это поможет.

источник

2012-06-28 17:57:54 Miro

Спасибо за подсказку. Но я все еще вижу класс для элемента. – Kiran

Хммм ... На моей стороне нет такого элемента с class = buttonright или divinput. Я не знаю, что сказать. Возможно, мы смотрим на разные вещи. – Miro

Если вы посмотрите на инспектора на хроме или сафари, вы должны увидеть 2-3 уровня над элементом ввода. Это связано с тем, что jquerymobile добавляет другие элементы в процесс. – Kiran

Изменение CSS в коде JQuery 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

источник

2012-06-29 03:45:37 xan

дисплей CSS кнопки в одной линии с фиксированной процентной шириной

ответ

Смежные вопросы