javascript - css在右侧对齐多行contenteditable内容
问题描述
我正在尝试使用 html css 等制作一个基本的多行输入表单...对于输入,我使用的是 contenteditable="true" span 而不是常规的,而且我也不想使用表格。
话虽如此,我正在尝试将文本“标签”和输入框排成一行,如下图所示:
一切工作正常或多或少,除非 contenteditable 达到多行。我需要多行的东西与标签对齐,而不是重置到行的开头。这是到目前为止的代码:
input, .new_input {
border:0;
outline:0;
background:transparent;
border-bottom:1px solid black;
}
.titlething {
display:inline-block;
text-align:right;
width:80px;
margin-left:-20px;
}
#word_edit {
position:absolute;
max-width:300px;
border:1px #0F23D5 solid;
padding:4px;
background:#A1C9E4;
border-radius:15px;
padding:15px;
}
<div id="word_edit">
<label>
<span class="titlething">Meaning</span>
<span class="new_input" data-placeholder="Meaning:" data-name="meaning" contenteditable="true">some default text</span></br>
</label>
<label>
<span class="titlething">Phonetic</span>
<span class="new_input" data-placeholder="Phonetic:" contenteditable="true" data-name="phonetic">hi</span></br>
</label>
<label>
<span class="titlething">Other</span>
<span class="new_input" data-placeholder="Other:" contenteditable="true" data-name="other">test</span></br>
</label>
<button data-name="done">Done!</button>
</div>
如您所见,在您到达下一行之前,一切都或多或少地工作,但我需要新行从与第一行相同的位置开始。
有任何想法吗?
解决方案
请看下面的片段,我添加了 2 行:
display: inline-block;
去.new_input
和
vertical-align: top;
去.titlething
input,
.new_input {
border: 0;
outline: 0;
background: transparent;
border-bottom: 1px solid black;
display: inline-block;
}
.titlething {
display: inline-block;
text-align: right;
width: 80px;
margin-left: -20px;
vertical-align: top;
}
#word_edit {
position: absolute;
max-width: 300px;
border: 1px #0F23D5 solid;
padding: 4px;
background: #A1C9E4;
border-radius: 15px;
padding: 15px;
}
<div id="word_edit">
<label>
<span class="titlething">Meaning</span>
<span class="new_input" data-placeholder="Meaning:" data-name="meaning" contenteditable="true">some default text</span></br>
</label>
<label>
<span class="titlething">Phonetic</span>
<span class="new_input" data-placeholder="Phonetic:" contenteditable="true" data-name="phonetic">hi</span></br>
</label>
<label>
<span class="titlething">Other</span>
<span class="new_input" data-placeholder="Other:" contenteditable="true" data-name="other">test</span></br>
</label>
<button data-name="done">Done!</button>
</div>
推荐阅读
- tailwind-css - 横幅图像未显示且文本对齐失败
- android - mapId 改变时重新组合 MapView
- javascript - 如何解决运行此 `fetch` 请求时遇到的 CORB 问题?
- python - 当我在 VS Code 终端中激活 conda 环境时,我无法在终端中使用相应的 Python 解释器
- javascript - 如何修复与可拖动画布的碰撞?
- watchkit - 在哪里可以找到有关使用 Apple Watch 和 watchOS 读取分贝级别的文档?
- server - Red5pro libred5pro-crypto-5.2.4.so | Red5pro 设置错误
- r - 突然ggplot崩溃R工作室,有什么建议吗?
- python - Dask优化中的ALS算法
- python - 将特定输入传递给另一个函数