html - テキストの前に四角があり、リンク付きのテキストボックスを作成する方法

Question

私はこれにかなり慣れていないので、本当に助けが必要です! 私は試してみました。しかし、決してフィニッシュラインに来ることはありません。ページの左側にテキスト ボックスを作成しようとしています。3 つのテキスト ボックスを並べて配置し、テキストの左側に小さなボックスを配置します。これはテキストボックスの中に欲しいです。

誰かが私を助けてくれることを本当に願っています。私はこれが初めてなので、すべてを理解していません。

私は多くの異なるコードを試しました。誰か助けてください。

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でそれを行うことをお勧めします。
使い方は簡単で、素敵なアイコンやチュートリアルがたくさんあります。