如何在html頁面中的文本字段旁邊保留文本

Question

嘗試使用下面的代碼，但沒有得到確切的輸出。 有人可以在這里幫助我嗎？

<head>
    <title>question3</title>
</head>
<body>
    <form>
        name:<input type="text" name="hjcg"><p style="text-align: right">jgdfiuhio hjgiofhuorgfo gfd7uyte8u7tr98gt</p>
        username::<input type="text" name="hjcg"><span style="text-align: right">hjgdfiuhio hjgiofhuorgfo gfd7uyte8u7tr98gt</span>
    </body>
</html>![enter image description here](https://i.stack.imgur.com/OCSnC.jpg)![enter image description here](https://i.stack.imgur.com/XQkvB.jpg)

Answer 1

<p> 標簽是塊級元素，使它們在新行上全寬。 要使它們與其他元素顯示在同一行，您可以將它們設置為內聯或內聯塊元素，或者使用內聯元素，例如 <span>

要使元素出現在下一行，您可以使用 <div> 標簽，默認情況下它們是塊級元素（您也可以使用 css 更改）

 <html> <head> <title>question3</title> </head> <body> <form> <div> name:<input type="text" name="hjcg"> <span style="text-align: right">jgdfiuhio hjgiofhuorgfo gfd7uyte8u7tr98gt</span> </div> <div> username:<input type="text" name="hjcg"> <span style="text-align: right">hjgdfiuhio hjgiofhuorgfo gfd7uyte8u7tr98gt</span> </div> </form> </body> </html>

Answer 2

使用 Flex 應該可以解決您的問題，但您絕對應該考慮使用外部 css 文件。 您可以將其添加到您的 html 頁面：

<link href="your_style_file.css" rel="stylesheet">

那么你可以嘗試：

form{
    display: flex;
}

甚至更好，給你的表單一個類或一個 id

<form id="my-form">

或者

<form class="these-forms">

進而

#my-form{
    display: flex;
}

或者

.these-forms{
    display: flex;
}

如果您想在幾分鍾內學習 Flex 基礎知識，請查看FlexBoxFroggy 。

你實際上用text-align做的是在其容器內對齊文本。 您想要在表單內對齊項目。 將表單顯示為 Flex 將幫助您做到這一點。

如何在html頁面中的文本字段旁邊保留文本

問題描述

2 個解決方案

解決方案1
0 2020-03-30 07:08:39

解決方案2
0 2020-03-30 07:12:43

如何在html頁面中的文本字段旁邊保留文本

問題描述

2 個解決方案

解決方案1 0 2020-03-30 07:08:39

解決方案2 0 2020-03-30 07:12:43

解決方案1
0 2020-03-30 07:08:39

解決方案2
0 2020-03-30 07:12:43