如何让我的html5标签显示在此图片中

Question

如何让我的标签显示出他们在这张照片中的样子？

我需要它们在顶部和侧面，就像在照片中一样。提前谢谢。

这是我到目前为止的编码

<form>
    <div id="ab">
        <label>This is question number 01</label>
        <br />
        <label for="q1a1">1</label>
        <input type="radio" name="question01" id="q1a1">
        <label for="q1a2">2</label>
        <input type="radio" name="question01" id="q1a2">
        <label for="q1a2">3</label>
        <input type="radio" name="question01" id="q1a3">
        <label for="q1a2">4</label>
        <input type="radio" name="question01" id="q1a4">
        <label for="q1a2">5</label>
        <input type="radio" name="question01" id="q1a5">
        <label for="q1a2">6</label>
        <input type="radio" name="question01" id="q1a6">
        <label for="q1a2">7</label>
        <input type="radio" name="question01" id="q1a7">
        <label for="q1a2">8</label>
        <input type="radio" name="question01" id="q1a8">
   </div>
</form>

Answer 1

此网站已提出并回答了类似的问题。看看所附帖子的已接受答案。

styling with label above inputs

基本上你可以做的是使用display：在每个数字标签和无线电输入选择的单个div中阻止CSS样式。这将堆叠两个元素，而不是使用默认的内联显示样式。

/** two labels on each side of your scale*/
.end-label {
    float:left;
}
/** for div containing label over radio input */
.label-radiobtn-div {
    float: left;
}

/** inner label and radio components of   containing div, this will force each element on its own line */
.label-radiobtn-div input,
.label-radiobtn-div label {
    display: block;
}