html - 单选按钮左侧的图像 HTML CSS Bootstrap

Question

[我想把图片放在 radio 的左边这是代码

HTML:

          <div class="btn btn-default">
                <input type="radio" id="cc" name="radio-button" 
                 value="0">
                <label for="cc">
                    <span><img src="images/joker.jpg"></span>
                    <span>Lorem Ipsum</span>
                    <span>Lorem ipsum dolor sit amet, consectetur 
                    adipiscing elit. In semper quam nunc.</span>
                </label>
            </div>

查看图片链接查看我要做什么 谢谢

/image/GVMJB.png

Answer 1

您也可以将输入放在标签内并像这样调整您的代码:

label {
  display: flex;
  align-items: center;
}

label input {
  margin: 5px;
}

<div class="btn btn-default">
  <label for="cc">
     <img src="https://lorempixel.com/100/100/">
     <input type="radio" id="cc" name="radio-button" value="0">
     <div>
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet, consectetur 
        adipiscing elit. In semper quam nunc.</p>
     </div>
  </label>
</div>