css - jQuery 移动按钮拉伸(stretch)太远-6ren

css - jQuery 移动按钮拉伸(stretch)太远

转载作者：太空宇宙更新时间：2023-11-04 15:58:10

27

4

由于某种原因，当我调整浏览器窗口的大小时，文本字段下方的按钮似乎变得比文本框更宽。有什么想法吗？

SCRN:

enter image description here

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>

编辑:

将#confirmButton 的自定义 css 设置为宽度 97% 无效，

这也不起作用:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

这是按钮的 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;

屏幕截图(因为我头疼):

enter image description here

解决方案:

这适用于最新的 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;
}

最佳答案

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

这应该可以解决您的问题:http://jsfiddle.net/RVgnC/5/

关于css - jQuery 移动按钮拉伸(stretch)太远，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10171814/

27

4

0

文章推荐： c++ - 在 shared_ptr 过期后定位 weak_ptr

文章推荐： c++ - 输出 float 组值不能按预期工作

文章推荐： javascript - 防止点击暂停视频

delphi - 用Delphi进行不均匀拉伸(stretch)拉伸(stretch)
好吧，这是最好用图像来解释的事情...... 我正在寻找一个类似于 StretchBlt 的函数，但我可以将图像复制到定义目标四个角的 Canvas 上，即将图像的梯形/四边形拉伸(stretch)绘
iOS 自定义键盘可拉伸(stretch)图像停止拉伸(stretch)
我为 UITextField 制作了一个自定义键盘，其中包含 18 个 UIButton。它是一个 UIView，被设置为文本字段的 inputView。按钮是在 UIView 的 initWith
iphone - 可拉伸(stretch)图像拉伸(stretch)部分宽于1px
我想创建一个 UIButton，它使用可拉伸(stretch)图像作为背景图像，例如我可以轻松调整按钮大小以适应不同的标签等。所以我创建了以下运行良好的代码: UIImage *bgImage =
iphone - 具有可拉伸(stretch)ImageWithLeftCapWidth的UIImageView不会拉伸(stretch)图像
我正在尝试拉伸(stretch) UIImageView 中的图像 - 但我惨败了:) 以下设置: 带有 View 和附加到该 View 的 UIImageView 的 NIB 文件。使用IBOut
javascript - Canvas 可以在手机上拉伸(stretch)，但不能在电脑上拉伸(stretch)
我一直在尝试使用 html Canvas ，但由于某种原因，很难让它不拉伸(stretch)东西。我试过只使用 screen.width 和 screen.height，但我通过使用 screen.a
iphone - 如何在不拉伸(stretch)中心的情况下拉伸(stretch) UIImageView？
我想拉伸(stretch)上图的左右两侧，并保持中间的箭头不拉伸(stretch)。我怎样才能做到这一点？最佳答案如果你不喜欢打扰 Photoshop 并且图像不需要动态调整大小，你可以使用我在
css - 页脚列拉伸(stretch) - 使列背景拉伸(stretch)全宽
我的页脚在一个容器中有四列。它需要在容器内以与上面的内容对齐。我的问题是我想让左栏有红色背景，但目前它不会拉伸(stretch)，因为它显然在容器中。我怎样才能将它向左拉伸(stretch)整个宽
android - 中央区域不可拉伸(stretch)的拉伸(stretch)按钮
有没有办法拉伸(stretch)按钮，使中央部分保持完整？ 9-patch 不允许这样做。编辑:我按照 Benito 的建议使用了 9-patch。它工作正常。奇怪的是，我第一次无法得到它。最佳答
iphone - 如何在不拉伸(stretch)中心的情况下拉伸(stretch) UIImageView？
我想拉伸(stretch)上图的左右两边，中间的箭头不拉伸(stretch)。我该怎么做？最佳答案如果你不想打扰 Photoshop 并且如果图像不需要动态调整大小，你可以在 UIImage 上使
android - 9patch 垂直拉伸(stretch)，但不水平拉伸(stretch)
我创建了一个 9patch 图像，不知何故它只能垂直拉伸(stretch)。我尝试了其他 9-patch 图像，但它们具有相同的效果，为什么它们在其他情况下工作。所以我认为 9patch 应该没问题。
无需拉伸(stretch)笔即可拉伸(stretch)的 WPF 绘图
我需要在边框控件(或类似控件)中绘制一些简单的线条，这些线条始终延伸到边框的边界。有没有办法只拉伸(stretch)线条而不是它的笔？不涉及大量 C#？在这个版本中，线条延伸:
WPF图像拉伸(stretch)填充不会拉伸(stretch)到它的 parent 的边界
这是我的 XAML 及其外观:
javascript - 垂直拉伸(stretch)背景图像而不是按比例拉伸(stretch)，而不仅仅是覆盖 - 这可以实现吗？
编辑:答案将允许背景图像根据 body 的大小改变它的高度。如果正文是 500px 高，它应该是 100% 宽度，500px 高度。或 100% 宽度 2500 像素高度。也许我错过了这件事，但我正
ios - UILabel 自动布局 - 先水平拉伸(stretch)然后垂直拉伸(stretch)
我有一个 UILabel。我设置了尾随和前导空间约束，还添加了对齐 Y 中心约束。我已将行数设置为零。我的目标是将 UILabel 拉伸(stretch)到某个最大宽度，然后添加新行。在给定的约束条
html - CSS 拉伸(stretch) div 使其在屏幕上拉伸(stretch)
我正在制作一个网站，对于该网站，我正在使用顶部的导航栏。我想要的是将栏放在页面的顶部，并且它是主页的单独颜色。这是我当前的代码: body { font-family: "Baloo Bhaina
c++ - OpenGL 试图用纹理拉伸(stretch)四边形但拉伸(stretch)三角形？
我编写了代码来 reshape 已纹理化的四边形。当我拉伸(stretch)四边形时，图像确实按照我的预期拉伸(stretch)了。我似乎在拉伸(stretch)图像时有两个不同的三角形，图像被拉伸(
javascript - YouTube 视频高度比、拉伸(stretch)到窗口宽度以及在父容器外拉伸(stretch)
我在 div 中嵌入了 YouTube。此 div .entry-content 的 max-width 为 30em。 YouTube 嵌入我想要全窗口宽度，延伸到 #container 之外。为此
iOS - 可以拉伸(stretch) UIImageView 但不能拉伸(stretch) UIButton？
看: //UIImageView* stretchTest = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.png"]
html - 图像不是在本地拉伸(stretch)，而是在部署时拉伸(stretch)？ (仅限 CSS/HTML)
我有一个 super 简单的网页，由纯 HTML/CSS 组成。正如预期的那样，当我在本地运行它时，一切正常。但是，当我部署它时(使用 Droppages，一个通过 Dropbox 的静态页面托管平
android - 不该拉伸(stretch)的 9 补丁拉伸(stretch)，Android
我正在尝试将一个 9 色 block 图像设置为我的一项 Activity 的背景，但它不必要地拉伸(stretch)，使一切变得奇怪。我使用 draw9patch 创建它，并在左下角添加了一个像素，

首页

博学

6Ren·AI

商城

css - jQuery 移动按钮拉伸(stretch)太远