[分享]css中怎么在文本框两边写字

CSS中有时需要在文本框两边写字，这个效果可以通过使用padding和textindent属性实现。下面我们来详细了解一下如何实现这个效果。.textbox { padding: 8px 50px; ...

CSS中有时需要在文本框两边写字，这个效果可以通过使用padding和text-indent属性实现。下面我们来详细了解一下如何实现这个效果。

.text-box {
  padding: 8px 50px; /* 上下、左右的padding值 */
  text-indent: -50px; /* 前缩进值为负的padding-right值 */
  border: 1px solid #ccc; /* 为文本框添加边框 */
} 

如上述代码所示，我们首先给文本框设置上下和左右的padding值。这样文本框就会在内部留出一定的空间。同时，我们将前缩进值设置为负的padding-right数值，这样文本就会往内部偏移。这个值要与左右padding的值保持一致，才能使文本框两边的字显示完整。

接下来，我们还可以添加其他属性来美化文本框。

.text-box {
  padding: 8px 50px;
  text-indent: -50px;
  border: 1px solid #ccc;
  border-radius: 4px; /* 添加圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  font-size: 16px; /* 设置字体大小 */
} 

通过添加圆角、阴影和设置字体大小，可以使文本框更加美观。具体属性的设置可以根据需求进行修改。

综上所述，通过使用padding和text-indent属性，我们可以很方便地在文本框两边写字，同时还可以添加其他属性来美化文本框。