如何为文本框设置固定宽度，使其不受 padding-left 变化值的影响？

发布于 2024-11-17 08:10:10 字数 389 浏览 2 评论 0原文

我想将图像放置在与某些 padding-left 值左对齐的文本框中。为此，我在CSS中使用background-image和background-position属性。放置哪个图像由第三个值决定，并且图像具有不同的宽度。

我的第二个要求是文本框中的文本应该在图像结束后以 4px 的间隙显示。由于图像宽度不同，文本框宽度也不同。我想将其保持在固定宽度。

我尝试使用 text-indent 属性而不是 padding-left 通过放置：

text-indent : 40px;

text-indent 帮助我保持宽度固定，但是当我单击文本框时，它会在文本框的最开始处显示光标（在 2px 处）。

我该怎么做？我应该使用哪些 CSS 属性？

原文

I want to place an image in a textbox which is left aligned with some padding-left value. For that i am using background-image and background-position properties in CSS.
Which image to place, is decided by a third value and the images are of different width.

My second requirement is the text in the textbox should be displayed after the image ends with a gap of 4px.
Because of varying image width the textbox width is also varying. i want to keep it at a fixed width.

I tried using text-indent property instead of padding-left by putting :

text-indent : 40px;

text-indent helps me keeping width fixed but when i click in the textbox it shows cursor at very start of the textbox(at 2px).

How can i do it? Which CSS properties should i use?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风追烟花雨 2024-11-24 08:10:10

我不完全确定你的要求是什么，但从我收集到的信息来看，你似乎需要 CSS width 属性？

.myInput
{
   background: white url(images/smiley.png) center left no-repeat;
   padding-left:18px;
   width: 120px; /* Fixed outside bounds width of the text input*/
}

I'm not completely sure of what your asking but from what I can gather it sounds like you need with CSS width property?

.myInput
{
   background: white url(images/smiley.png) center left no-repeat;
   padding-left:18px;
   width: 120px; /* Fixed outside bounds width of the text input*/
}

回复收藏 0 原文

~没有更多了~