0

请不要，我对 CSS 不是很熟练。
我正在做一个个人项目，我有两列包含文本框。这些文本框是使用背景图像自定义的。
这非常有效。

但是当我调整浏览器的大小时，texboxes 会相互重叠。重叠时，我希望调整 texboxes 的大小；当达到最小宽度时，我想将 texboxes 放在彼此下方。
我可以用纯 CSS 做到这一点吗？如果是这样，我怎样才能改变我写的东西来达到这个目标？

（哦，顺便说一句，我需要兼容 IE8+，不需要支持 IE6 和 7）。谢谢 ！

这是一个JsFiddle，可以更好地理解问题并查看我迄今为止编写的代码。

我想问题出在

width: 278px;

但我试过了%，但没有解决问题（你可以试试）。
谢谢您的帮助

4

1 回答 1

1

这是因为您用于背景的图像的宽度，如果您的输入与图像的宽度相同，它可以正常工作。小提琴 

input[type=text],input[type=password]{
   border:none;
   background:url('http://i.stack.imgur.com/FPaoD.png') no-repeat top left;
   font: 14px 'Segoe UI','Arial',sans-serif;
   color: #888;
   outline:none;
   height: 48px;
   margin: 0 auto 10px;
   padding: 0 10px 0 50px;
   /* set width to image width */
   width: 338px;
}

如果您希望它们具有响应性，我建议使用 CSS 对它们进行样式设置。

于 2013-11-05T13:39:04.043 回答