Question

＆＃13;

span.contenteditable[contenteditable] {
    display: inline-block;
}
span.contenteditable[contenteditable]:empty::before {
    content: attr(data-placeholder);
    display: inline-block;
    color:red;
}
span.contenteditable[contenteditable]:empty:focus::before {
    content: attr(data-focused-advice);
    color:red;
}

＆＃13;

I, <span type="text" id="printownername" class="underline contenteditable" contenteditable="true" data-placeholder="Please Type Name" data-focused-advice="Start typing"></span> , of legal age, <span type="text" id="printownercitizenship" class="underline contenteditable" contenteditable="true" data-placeholder="Please Type Citizenship" data-focused-advice="Start typing"></span> <span type="text" id="printownercivilstatus" class="underline contenteditable" contenteditable="true" data-placeholder="Please Type Civil Status" data-focused-advice="Start typing"></span> and with postal address at<br>
                <small><i> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (Citizenship) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (Civil Status)</i></small><br>
                <span type="text" id="printowneraddress" class="underline contenteditable" contenteditable="true" data-placeholder="Please type" data-focused-advice="Start typing"></span>, after having been duly sworn to in accordance with law hereby depose and say:<br>
                <br>

＆＃13;

我有这个可编辑的范围，下面有一个标签。我想让标签锁定在跨度中。当我说锁定在哪里时，我希望标签总是低于跨度。

我不知道该怎么做。

我希望标签(Citizenship)始终低于可编辑范围，其中包含文字Please Type Citizenship等文字夹。因此输入日期公民身份的用户在其下方有标签。

我希望所有标签始终低于各自的可编辑范围

预期的样本是。

Canadian

(Citizenship)

Answer 1

解决此问题的一种方法类似于 ruby注释的概念，唯一的例外是注释低于基线而不是上面。

所以我在跨度和它的音符周围放了一个容器，我做了内联块，然后把音符作为一个块。

> Date.now()

span.contenteditable[contenteditable] {
    display: inline-block;
}
span.contenteditable[contenteditable]:empty::before {
    content: attr(data-placeholder);
    display: inline-block;
    color:red;
}
span.contenteditable[contenteditable]:empty:focus::before {
    content: attr(data-focused-advice);
    color:red;
}
.annotate {display:inline-block; vertical-align:top}
.annotate small {display:block; font-style:italic;}

（另请注意，我不是水平滚动条的忠实粉丝，所以我对HTML的格式不同，但这对结果来说无关紧要。）

可修改的范围在CSS HTML

1 个答案: