我正在嘗試使用各種輸入制作表單，并且在這些輸入之間我想要文本。它應該是這樣的：
我把文本放在下面沒有問題，但同時在每個輸入之間輸入文本很難。最初我試圖將其作為 div 內的一系列 textareas 來執行，但這使得下面的文本無法正常作業。知道我怎樣才能做到這兩點嗎？這是它目前的樣子：
這是我的代碼：
反應：
<form>
<div id="form_fields_div">
<fieldset>
<input type="text" name="text_box_number_1_page_6" id="text_box_number_1_page_6" />
<label for="text_box_number_1_page_6">(a feeling you don’t like) </label>
</fieldset>
<h2>. I do</h2>
<fieldset>
<input type="text" name="text_box_number_2_page_6" id="text_box_number_2_page_6" />
<label for="text_box_number_2_page_6">(an activity that makes you feel better)</label>
</fieldset>
<h2>to make me feel less</h2>
<fieldset>
<input type="text" name="text_box_number_3_page_6" id="text_box_number_3_page_6" />
<label for="text_box_number_3_page_6">(the feeling you don’t like)</label>
</fieldset>
<h2>That means that</h2>
<fieldset>
<input type="text" name="text_box_number_3_page_6" id="text_box_number_3_page_6" />
<label for="text_box_number_3_page_6">(the activity that makes you feel better)</label>
</fieldset>
<h2>is a coping strategy.</h2>
</div>
</form> 和CSS：
form {
width: 89.5em;
overflow: hidden;
border: none;
}
fieldset {
display: block;
float: left;
width: 10em;
margin: 0 1em 0 0;
border: none;
}
fieldset:last-child {
margin: 0;
}
fieldset > input,
fieldset > label {
display: block;
text-align: center;
margin: 0 auto;
font-size: 15px;
}
fieldset > input {
width: 80%;
font-size: 25px;
}
#form_fields_div {
display: inline;
white-space: nowrap;
} uj5u.com熱心網友回復：
您可以創建由span帶有顯示inline-flex和方向column的標簽包裹的表單項，以在輸入下顯示標簽
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<link
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"
/>
</head>
<body>
<form>
<div id="form_fields_div">
For example, sometimes I do feel
<span class="inline-flex flex-col">
<input
class="border-b border-black"
type="text"
name="text_box_number_1_page_6"
id="text_box_number_1_page_6"
/>
<label for="id1">(a feeling you don’t like)</label>
</span>
<span>. I do</span>
<span class="inline-flex flex-col">
<input
class="border-b border-black"
type="text"
name="text_box_number_2_page_6"
id="text_box_number_2_page_6"
/>
<label for="id1">(an activity that makes you feel better)</label>
</span>
<span>to make me feel less</span>
<span class="inline-flex flex-col">
<input
class="border-b border-black"
type="text"
name="text_box_number_3_page_6"
id="text_box_number_3_page_6"
/>
<label for="text_box_number_3_page_6"
>(the feeling you don’t like)</label
>
</span>
<span>That means that</span>
<span class="inline-flex flex-col">
<input
class="border-b border-black"
type="text"
name="text_box_number_3_page_6"
id="text_box_number_3_page_6"
/>
<label for="text_box_number_3_page_6"
>(the activity that makes you feel better)</label
>
</span>
<span>is a coping strategy.</span>
</div>
</form>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/394526.html