文字與輸入一行

我已經分度，輸入字段和文本文字與輸入一行

這裏是代碼

.form-control { 
 
    display: block; 
 
    width: 100%; 
 
    height: 34px; 
 
    position: relative; 
 
    padding: 6px 12px; 
 
    font-size: 14px; 
 
    line-height: 1.42857143; 
 
    color: #555; 
 
    margin: 0 auto; 
 
    background-color: #fff; 
 
    border-color: #1f66b4; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
    background-image: none; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
 
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 
 
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
 
}

<div style="width:50%;height:100%;float: left;padding-left:20%"> 
 
      <form style="text-align:center;"> 
 
       <b>dfsdfsdfsdf</b> 
 
       <input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" style="margin: 30px auto 0;border-radius:50px;border-width: 1px;"> 
 
      </form> 
 
     </div>

但文字是在輸入。

我需要的文本一行的輸入。我該怎麼做？

來源

2017-07-06 Sukhomlin Eugene

flexbox，這花車，表，絕對定位... – domsson

https://codepen.io/anon/pen/RgBxqq似乎在這裏很好。我認爲我們需要更多地瞭解你在做什麼。 –

你的代碼已經工作：https://jsfiddle.net/5kmLszv6/你有關於你的問題的更多信息？ – chrona

希望你已經有的工作正常。運行下面的代碼片段查看它。

<div style="width:50%;height:100%;float: left;padding-left:20%"> 
 
     <form style="text-align:center;"> 
 
      <b>dfsdfsdfsdf</b> 
 
      <input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" style="margin: 30px auto 0;border-radius:50px;border-width: 1px;"> 
 
     </form> 
 
    </div>

來源

2017-07-06 10:08:16

我編輯代碼片段 –

裹DIV內部的輸入標籤。使用標籤標籤，而不是說明B標籤（它有助於屏幕閱讀器）然後給CSS「浮動：左」爲標籤和DIV（包裝輸入）

atlast從您的輸入刪除保證金和連鎖行業一些邊距爲標籤和浮動後，明確它

<div style="width:50%;height:100%;float: left;padding-left:20%"> 
    <form style="text-align:center;"> 
     <label style="float:left; margin-top:6px">dfsdfsdfsdf</label> 
     <div style="float:left"> 
      <input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" style="border-radius:50px;border-width: 1px;"> 
     </div> 
     <div style="clear:left"> 
    </form> 
</div>

來源

2017-07-06 10:21:18 Karthikeyan

我編輯後的帖子 –

好的，我建議使用標籤 – Karthikeyan

標籤顯示在左上角的頁面，而不是div。 –

您可以添加填充的佔位符，但瀏覽器的支持，需要前綴。

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
 
    padding-left: .3em; 
 
} 
 
::-moz-placeholder { /* Firefox 19+ */ 
 
    padding-left: .3em; 
 
} 
 
:-ms-input-placeholder { /* IE 10+ */ 
 
    padding-left: .3em; 
 
} 
 
:-moz-placeholder { /* Firefox 18- */ 
 
    padding-left: .3em; 
 
}

<div style="width:50%;height:100%;float: left;padding-left:20%"> 
 
    <form style="text-align:center;"> 
 
    <b>dfsdfsdfsdf</b> 
 
    <input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" style="margin: 30px auto 0;border-radius:50px;border-width: 1px;"> 
 
    </form> 
 
</div>

來源

2017-07-06 10:28:18 Gerard

<div style="width:50%;height:100%;float: left;padding-left:20%"> 
 
      <form style="text-align:center;"> 
 
       <lable> dfsdfsdfsdf</label> 
 
       <input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name" style="margin: 30px auto 0;border-radius:50px;border-width: 1px;"> 
 
      </form> 
 
     </div>

來源

2017-07-06 10:29:45

我在帖子中編輯過片段 –

文字與輸入一行

回答

相關問題