如何制作一个文本框，该文本框的前面有一个正方形，带有链接

Question

我对此很陌生，我真的需要一些帮助！ 我已经尝试了。但是永远不要走到终点。 我正在尝试在页面左侧创建一个文本框。 我要三个彼此相邻的文本框，在文本左侧有一个小框。我想要在文本框中。

我真的希望有人能帮助我，我不了解所有事情，因为我是新来的。

我尝试了很多不同的代码。有人可以帮我吗。

Answer 1

.btn{
display:inline-block;
background:#ddd;
padding:6px;
}
span{
position:relative;
padding-left:25px;
}
span:before{
position:absolute;
content:"";
width:18px;
height:18px;
top:0px;
left:0;
background-color:green;
}

<div class="container-textboxes">

<a class="btn"><span>Text</span></a>
<a class="btn"><span>Text</span></a>
<a class="btn"><span>Text</span></a>

</div>

这就是你想要的吗？

Answer 2

您是说这样吗？

div{
  width: 50px;
  
  /* Just visual */
  border: solid black 1px;
}

#one{
  float: left;
}
#two{
  float: left;
  margin-left: 5px;
}
#three{
  margin-left: 115px;
}

<div id="one">
  <p>one</p>
</div>
<div id="two">
  <p>two</p>
</div>
<div id="three">
  <p>three</p>
</div>

如果需要，您可以仅在其中添加框，我建议您使用FontAwesome进行操作。
它很容易使用，并且有很多精美的图标和教程。