Поместите небольшой текст справа от поля ввода
Я должен иметь поле ввода, которое должно быть отключено при загрузке страницы до тех пор, пока не будет нажат небольшой текст «Редактировать» рядом с полем ввода, включающий его. Я хоть убей не могу понять, как разместить этот текст там, где он предназначен. Я еще не добавил отключенную/включенную функциональность, но это прямолинейно.
На данный момент мой код довольно прост. Mtop-8 просто устанавливает верхний край поля равным 8 пикселей.
<div class = "mtop-8">
<input placeholder = "Code" [(ngModel)] = "typedCode" />
<a style = "margin-top: auto"> Edit </a>
</div>Я попытался использовать a, но в результате он оказался немного ниже поля ввода. Мне нужно, чтобы оно совпадало с нижней частью этого поля немного правее от него. Я также пытался использовать margin-top: auto, text-align: left и другие стили CSS, чтобы попытаться переместить его на место, но безрезультатно.
Ответы 1
Используйте flexbox, чтобы расположить контент горизонтально, а не вертикально, затем установите для свойства align-items значение center, чтобы убедиться, что весь контент внутри div будет центрироваться по оси Y. Также я рекомендую применить к элементу некоторый запас.
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";
}
}); .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;
} <div class = "mtop-8">
<input id = "codeInput" placeholder = "Code" [(ngModel)] = "typedCode" disabled/>
<a id = "editLabel">Edit</a>
</div>В середине текстового поля справа по-прежнему отображается надпись «Редактировать», вместо этого мне нужно, чтобы она находилась в том же положении, но на одной линии с нижней частью поля ввода и серединой.
@Tommy Kiroto, вы можете задать отрицательное нижнее поле для .mtop-8 a{-8px}
@Mehdi Вместо того, чтобы использовать параметр «margin-bottom», который отправлял текст вверх, мне пришлось использовать «margin-top», чтобы отправить его вниз.
Похоже, они такие, как вы задумали. Входные данные и привязки являются встроенными элементами. Таким образом, они оба будут находиться в одной строке (один за другим по порядку), пока не станет достаточно места, а затем более поздний перейдет на следующую строку.