單選按鈕的多行標簽
[英]Multi-line label for radio button
問題描述
我希望“這是標簽”文本堆疊在“前綴文本”下方，而單選按鈕在“前綴文本”旁邊對齊。 是否可以通過更新僅包含“這是標簽”的 div 元素的類來完成此操作？ 如果可能的話，我想保持label-container類不變，因為我可能會在“前綴文本”前面添加圖標，所以我需要display: inline-flex來包裝它們。 https://codepen.io/Judoboy/pen/OJQqPEW?editors=1100
.label-container { display: inline-flex; justify-content: flex-start; align-items: center; } .label-text { display: flex; justify-items: center; align-items: center; height: 100%; } .prefix { font-weight: bold; } .text-spacing { padding-inline-start: 8px; padding-inline-end: 4px; }
<label class="label-container"> <input type="radio" /> <div class="label-text text-spacing prefix">Prefix Text</div> <div class="label-text text-spacing">This is label</div> </label>
3 個解決方案
解決方案1
1 已采納 2022-06-16 19:11:42
你可以這樣做：
- 用額外的
div包裝Prefix Text和This is label。 - 將
.label-container類中的align-items更改為start（您可以保留display: inline-flex）。
.label-container { display: inline-flex; justify-content: flex-start; align-items: start; } .label-text { display: flex; justify-items: center; align-items: center; height: 100%; } .prefix { font-weight: bold; } .text-spacing { padding-inline-start: 8px; padding-inline-end: 4px; }
<label class="label-container"> <input type="radio" /> <div> <div class="label-text text-spacing prefix">Prefix Text</div> <div class="label-text text-spacing">This is label</div> </div> </label>
解決方案2
0 2022-06-16 16:01:34
只需使用一些變換。
.AlignmentFix {
transform: translate(-100%, 17px);
}
<label class="label-container">
<input type="radio" />
<div class="label-text text-spacing prefix">Prefix Text</div>
<div class="label-text text-spacing AlignmentFix">This is label</div>
</label>
解決方案3
0 2022-06-16 19:13:54
// finding the only <button> element in the document, and binding // an anonymous Arrow function as the event-handler for the 'click' // event on that <button>: document.querySelector('button').addEventListener('click', (e) => { // we retrieve the first element in the document that matches // the selector supplied to document.querySelector(): let original = document.querySelector('label.label-container'), // we then clone that node, and its descendant elements // with the Boolean true argument passed to Node.cloneNode(): clone = original.cloneNode(true); // e.currentTarget is the element to which the anonymous function // was bound; from that element we navigate to the first ancestor // element that matches the selector and then append the 'clone' // to that <main> element: e.currentTarget.closest('main').append(clone); });
/* overriding browser default layout calculations, and zeroing all margin and padding for cross- browser consistency: */ *, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; } /* element added for layout purposes, to avoid changing the <body> element's styles in case of conflict with your real-world preferences: */ main { border: 1px solid #000; border-radius: 1em; display: flex; flex-flow: row wrap; gap: 0.5em; justify-content: space-between; margin-block: 1em; margin-inline: auto; padding: 0.5em; width: clamp(10rem, 60vw, 1000px); } /* styling the <button> to occupy the whole width, or a full 'row': */ button:first-child { flex-basis: 100%; flex-grow: 1; padding-block: 0.5em; } .label-container { /* while 'inline grid' (note the space) is a valid property- value, regardless of Chrome's claim to the contrary, I've changed the property-value to 'inline-grid' for compatibility with Chrome, Edge, etc: */ display: inline-grid; /* here we create a grid-layout of two columns, and two rows with three 'cells'. The first cell is placed in the first column, and spans both rows. The other cells take only one 'cell' each. */ grid-template-areas: "radio prefix" "radio text"; } .label-text { display: flex; justify-items: center; align-items: center; height: 100%; } .prefix { font-weight: bold; } input { align-self: center; } .text-spacing { grid-column: 2; padding-inline-start: 8px; padding-inline-end: 4px; }
<!-- this element is purely for the wrapping, to supply padding and layout; obviously adjust to your preferences: --> <main> <!-- added a <button> to handle the addition of new <label> elements to demonstrate the layout --> <button>Add another <label> element</button> <label class="label-container"> <input type="radio"> <div class="label-text text-spacing prefix">Prefix Text</div> <div class="label-text text-spacing">This is label</div> </label> <label class="label-container"> <input type="radio"> <div class="label-text text-spacing prefix">Prefix Text</div> <div class="label-text text-spacing">This is label</div> </label> <label class="label-container"> <input type="radio"> <div class="label-text text-spacing prefix">Prefix Text</div> <div class="label-text text-spacing">This is label</div> </label> </main>
TableView中的多行標簽
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.