如何在具有不同類的同一行上獲取兩個段落標籤？

Question

我想在同一行上有登錄名，密碼和全部提交。

<p><input type="text" name="login" value="" placeholder="Username or Email"><input type="password" value="" placeholder="Password"></p><p class="submit"><input type="submit" name="commit" value="Login"></p> 

Answer 1

您可以隨時使用span一個段落標記

中添加不同類別例如：

<p><span class="1">First Item</span> <span class="2">Second Item</span></p> 

然而，這聽起來像你正在尋找使用在input領域需要提交數據的form。在這種情況下，所有你需要做的是這樣的： https://jsfiddle.net/fNPvf/25012/

Answer 2

您可以通過添加顯示 CSS屬性使HTML元素內聯（在同一行）：

display:inline-block; 

<輸入>元素默認爲內嵌塊顯示。但是< p>元素默認爲塊顯示;這意味着它們在元素之後有一條折線。

但是，由於您似乎對HTML和CSS不熟悉，因此我強烈建議您查看Boostrap。這是一個使網站樣式和模板更容易的框架。這就是爲什麼在提交輸入之前，圍繞這兩個輸入的源文件會分成一行。

請參閱their documentation的片段，瞭解如何製作內嵌登錄表單。在完整頁面模式下運行此代碼段，以查看它是如何工作的。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form class="form-inline"> 
 
     <div class="form-group"> 
 
     <label class="sr-only" for="exampleInputEmail3">Email address</label> 
 
     <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label class="sr-only" for="exampleInputPassword3">Password</label> 
 
     <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"> 
 
     </div> 
 
     <div class="checkbox"> 
 
     <label> 
 
      <input type="checkbox"> Remember me 
 
     </label> 
 
     </div> 
 
     <button type="submit" class="btn btn-default">Sign in</button> 
 
    </form>