Fatal编程技术网
  • css/
  • Css jQuery移动按钮拉伸太远

Css jQuery移动按钮拉伸太远

css button jquery-mobile

Css jQuery移动按钮拉伸太远,css,button,jquery-mobile,sizing,Css,Button,Jquery Mobile,Sizing,由于某些原因，我越是调整浏览器窗口的大小，文本字段下的按钮似乎比文本框更宽。你知道为什么吗 SCRN: HTML: <!DOCTYPE html> <html> <head> <title>Title</title> <script src="scripts/ajax.js"></script> <link rel="styleshee

由于某些原因，我越是调整浏览器窗口的大小，文本字段下的按钮似乎比文本框更宽。你知道为什么吗

SCRN:

HTML:

   <!DOCTYPE html>
    <html>
    <head>
        <title>Title</title>
        <script src="scripts/ajax.js"></script>
        <link rel="stylesheet" href="css/custom.css" />
        <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>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
<div data-role='page' id='confirmDetails' data-add-back-btn='true' data-theme='a'>
<div data-role='header' data-position='fixed'><h1>Confirm Details</h1></div>
<div class='ui-body ui-body-e'><p><strong>Please recheck your details to make sure they are correct, then press confirm.</strong></p></div>
<div data-role='content'>
<div><label>Name</label><input type='text' value='Some factor name' disabled /></div>
<div><label>VAT No</label><input id='txtFVATNo' type='text' value='121212121' placeholder='vat no' /></div>
<div><label>Email</label><input id='txtFEmail' type='email' value='a@b.com' autocapitalize='none' placeholder='email address' /></div>
<div><label>Name</label><input id='txtFContactName' type='text' value='Muhammad' autocapitalize='words' placeholder='contact name' /></div>
<input type='submit' id='btnConfirm' value='Everything Correct - Confirm!' data-icon='check' data-iconpos='right' /></div>
</div>
    </body>
    </html>
以下是按钮的CSS：

webkit-appearance: none;
-webkit-box-align: center;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(255, 255, 255, 0);
background-image: none;
background-origin: padding-box;
border-bottom-color: black;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: black;
border-left-style: none;
border-left-width: 0px;
border-right-color: black;
border-right-style: none;
border-right-width: 0px;
border-top-color: black;
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: black;
cursor: pointer;
display: block;
filter: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 1px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 39px;
left: 0px;
letter-spacing: normal;
line-height: normal;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 0.10000000149011612;
padding-bottom: 1px;
padding-left: 6px;
padding-right: 6px;
padding-top: 1px;
position: absolute;
text-align: center;
text-decoration: none;
text-indent: -9999px;
text-shadow: none;
text-transform: none;
top: 0px;
white-space: pre;
width: 391px;
word-spacing: 0px;
z-index: 2;
截图（针对我的头痛）：

解决方案：

这适用于最新的1.1.0版本

input.ui-input-text, textarea.ui-input-text {
    width: 100% !important;       /* used to be width: 97%; */
    /* add box sizing so padding is included in width */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}​
如果CSS按钮有“左填充/右填充”，请不要使用“宽度：100%”

请尝试更改为“宽度：97%”或95%或其他。

在
jquery.mobile-1.1.0.min.css
中，
input.ui-input-text、textarea.ui-input-text和
和
ui-btn
之间存在宽度、填充和边距的冲突组合，这就是它们看起来不同的原因

将css更改为以下内容：


.ui-btn {
    ....
    margin: 0.5em 0;   /* used to be margin: 0.5em 5px; */
    ....
}

input.ui-input-text, textarea.ui-input-text {
    ....
    width: 100% !important;       /* used to be width: 97%; */
    /* add box sizing so padding is included in width */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    ....
}



这将解决您的问题：
对于旧版本，您可以通过javascript对宽度进行后处理。但是您必须将填充改为“px”，才能从$（'.ui content'）中减去它
 如果将其放在表格中，则可以应用



属性->


这将防止任何拉伸超过其设定宽度！其中包括jQuery按钮；）
 正如答案中所提到的，填充和尺寸设置为
100%
的情况不太好。在这种情况下，如果真的有填充，我会设置
#btnConfirm{width:100%；padding:5px 0px 5px 0px；}
因为在这种情况下，你真的不需要在侧面填充。嗨，lollero，对不起，没有工作。按钮有静态宽度？这是jquery mobile或您为按钮设置的css生成的
元素.style
。。如果不是你在css文件中设置的css，也请添加它。。下面他说了些什么↓上面的css是element.style，我没有按钮的自定义css。JSFIDLE忽略它生成的按钮中的奇怪按钮。重要的是上面的原始问题就在这里。这里有一个没有重叠按钮的按钮-（我只是从侧面删除了jquery mobile选项）我认为，将宽度设置为97%或95%并不明智，因为如果你有一个iPad，那么在横向模式下按钮的宽度与纵向模式下的不同。宽度的百分比始终取决于屏幕宽度Hi MyHeadharts，很好的发现。但不幸的是，它有一些副作用。这是我的登录页面之前：和自定义css之后：它几乎对登录页面进行了排序，顶部的圆形按钮现在触到了标题的底部，列表视图混乱了：D我认为如果你继续尝试并遵循此操作，你的头部会非常受伤。请看上面的屏幕截图。@muhammada没有询问如何布局表格，因此不适用。他问了一个CSS布局问题，是关于按钮和列表内容，而不是表格内容。很抱歉你被否决票冒犯了，先生。我同意用户有权给出他们想要的答案，也有权自行决定是否否决。SO的主要用途不是让用户运行投票系统来帮助找出最相关的答案吗？这个问题描述了我一直试图解决的问题。当我在这里筛选答案时，我觉得你的答案离题了，因为他问了一个CSS列表布局问题。先生，将否决票个人化到使用人身攻击和报复性否决票的地步是相当俗气的。

.ui-btn {
    ....
    margin: 0.5em 0;   /* used to be margin: 0.5em 5px; */
    ....
}

input.ui-input-text, textarea.ui-input-text {
    ....
    width: 100% !important;       /* used to be width: 97%; */
    /* add box sizing so padding is included in width */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    ....
}