1
我試圖在輸入字段上疊加標籤。事情是，我正在使用flex，而且它看起來並沒有以同樣的方式工作。Flexbox表單中的相對標籤定位
我在谷歌上尋找解決方案，但它似乎大多數我可以找到通過flex定位對齊項目，但我需要我的元素並排對齊後移動標籤。我提供了代碼，以防我很難理解我需要什麼。
我也在這裏尋找解決方案，但我沒有找到任何具體的問題。目前，我的標籤覆蓋了字段，但我無法讓字段彼此對齊。另外，我相信你們中的一些人會注意到在較小屏幕上的標籤下方有字段。
所以，爲了確保我澄清，我不知道我是誰。當標籤重疊輸入時，我需要輸入字段並排對齊。 （白板草圖：https://sketchboard.me/dADoYPlJsIfT#/）
/* ---- START RESET ---- */
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
input, select, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
\t margin: 0;
\t padding: 0;
\t vertical-align: baseline;
\t box-sizing: border-box;
\t font-weight: normal;
\t font-style: normal;
\t border: 0;
\t outline: none;
\t resize: unset;
\t cursor: default; /* 2 */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
\t display: block;
\t box-sizing: border-box;
}
html {
\t font-size: 62.5%;
\t background-color: #eee;
\t overflow-x: hidden;
}
html, html a {
\t -webkit-font-smoothing: antialiased;
}
body {
\t font-size: 1.6rem;
\t font-family: OpenSansRegular, sans-seriff;
\t color: #333;
\t line-height: 1.25;
}
textarea {
\t -moz-padding-end: 0px;
\t -moz-padding-start: 0px;
}
input,
textarea,
select,
button,
label {
\t font-family: inherit;
\t font-size: inherit;
\t line-height:inherit;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="menu"]::-moz-focus-inner {
\t border: 0;
\t padding: 0;
\t margin: 0;
}
/* ---- END RESET ---- */
input,
textarea,
select,
button,
label,
span {
\t box-sizing: border-box;
\t order: 0;
\t align-self: center;
\t border: 0px solid #333;
}
form {
\t position: relative;
\t display: flex;
\t flex-direction: row;
\t flex-wrap: wrap;
\t justify-content: center;
\t align-content: space-between;
\t align-items: center;
\t width: 80%;
\t margin: auto;
\t padding: 5rem;
border: 1px solid #333;
}
input,
textarea,
select,
button,
label {
\t display: inline-block;
\t flex: 0 0 50%;
border: 1px solid #333;
}
label {
\t z-index: 1;
border: 0px solid #333;
}
input,
textarea,
select,
button,
label {
\t position: relative;
\t padding: .8rem;
}
input[type=text],
input[type=email],
input[type=url],
input[type=tel],
input[type=number],
input[type=date],
select,
textarea {
\t vertical-align: top;
\t top: 0;
\t left: -50%;
}
::placeholder {
\t color: rgba(51, 51, 51, 0);
}
::-webkit-input-placeholder { /* WebKit browsers */
\t color: rgba(51, 51, 51, 0);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
\t color: rgba(51, 51, 51, 0);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
\t color: rgba(51, 51, 51, 0);
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
\t color: rgba(51, 51, 51, 0);
}
textarea::-webkit-input-placeholder { /* WebKit browsers */
\t color: rgba(51, 51, 51, 0);
}
textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
\t color: rgba(51, 51, 51, 0);
}
textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
\t color: rgba(51, 51, 51, 0);
}
textarea:-ms-input-placeholder { /* Internet Explorer 10+ */
\t color: rgba(51, 51, 51, 0);
}<h3>Form Name</h3>
<form class="form-horizontal">
\t \t <!-- Text Input-->
\t \t <label for="firstName">First Name</label>
\t \t <input type="text" id="firstName" name="firstName" placeholder="" />
\t \t
<!-- Text Input-->
\t \t <label for="lastName">Last Name</label>
\t \t <input type="text" id="lastName" name="lastName" placeholder="" />
</form>
爲什麼你想要字段內的標籤名稱？爲什麼不使用佔位符屬性？ –
哦，當我完成後，標籤將滑出隱藏。我將佔位符文本，但它將被設置爲透明。我只想用標籤嘗試一些不同的轉換技巧。 – Jaime
哦，我明白了。他們在兩條不同的路線上的原因是因爲您使用標籤的相對位置。相對位置確實會移動標籤，但如果您沒有移動標籤，它們仍會佔用它們應該佔用的空間。你需要使用絕對定位。 –