Html 将小文本放在输入字段的右侧

发布于05月04日

我的目的是有一个输入字段，在页面加载时禁用，直到点击输入字段旁边的小文本"编辑"以启用它.我一生都想不出如何将此文本放置在它应该放置的位置.我还没有添加禁用/启用的功能，但这很简单.

到目前为止，我的代码非常基本.Mtop-8只是将余量上限设置为8 px.

<div class="mtop-8">
<input placeholder="Code" [(ngModel)]="typedCode" />
<a style="margin-top: auto"> Edit </a>
</div>

我try 使用a，但这将它置于输入字段的下方.我需要让它与该字段的底部稍微偏右保持一致.我还try 过margin-top: auto, text-align: left和其他css样式试图将其向下推到它的位置，但没有效果.

推荐答案

使用flexbox使内容水平而不是垂直堆叠，然后将Deliver-items属性设置为中心，以确保分区内的所有内容都将以Y轴为中心.我还建议对元素应用一些余量.

<style>
.mtop-8 {
    margin-top: 8px;
    display: flex;
    align-items: center;
}
.mtop-8 a {
    /* Add a little spacing in between the input and text */
    margin-left: 4px;
}
</style>
<div class="mtop-8">
    <input id="codeInput" placeholder="Code [(ngModel)]="typedCode" disabled/>
    <a id="editLabel">Edit</a>
</div>
<script>
document.getElementById("editLabel").addEventListener("click", function() {
    let input = document.getElementById("codeInput");
    let label = document.getElementById("editLabel");
    if (input.disabled) {
        input.disabled = false;
        label.innerHTML = "Stop Editing";
    } else {
        input.disabled = true;
        label.innerHTML = "Edit";
    }
});
</script>