位置文本和文本輸入字段

在右邊的左邊和文本輸入文本的列表。

這是我的嘗試，但它既不工作得非常好或相當優雅：

.textbox { 
 
    width: 400px; 
 
    border: solid black 2px; 
 
} 
 
ul { 
 
    padding: 5px; 
 
    display: inline-block; 
 
    list-style-type: none; 
 
}

<div class="textbox"> 
 

 
    <h4>Info section</h4> 
 

 
    <ul> 
 
    <li>General</li> 
 
    <li>Board name</li> 
 
    <li>Board image</li> 
 
    <li>Short domains</li> 
 
    <li>Use short domains?</li> 
 
    <li>Get in touch</li> 
 
    <li>Add short domain</li> 
 
    <li>Delete board</li> 
 
    </ul> 
 

 
    <ul> 
 
    <li> 
 
     <input type="text"> 
 
    </li> 
 
    <li> 
 
     <input type="text"> 
 
    </li> 
 
    <li> 
 
     <input type="text"> 
 
    </li> 
 
    <li> 
 
     <input type="text"> 
 
    </li> 
 
    <li> 
 
     <input type="text"> 
 
    </li> 
 
    <li> 
 
     <input type="text"> 
 
    </li> 
 
    <li> 
 
     <input type="text"> 
 
    </li> 
 
    </ul> 
 

 
</div>

我能做到的，我想在另一個更優雅的方式來實現呢？

來源

2016-01-26 user2703522

line-height：23px;在你的元素上。這將使文本與輸入字段對齊（輸入字段高度爲23px） –

變化HTML結構有點與Flexbox的你可以做到這一點

.info { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    padding: 25px; 
 
    border: 1px solid black; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    display: flex; 
 
    margin: 5px; 
 
} 
 

 
input { 
 
    flex: 0 1 60%; 
 
    margin-left: auto; 
 
}

<div class="info"> 
 
    <h3>Info Section</h3> 
 
    <ul> 
 
     <li><label for="">Lorem ipsum dolor</label> <input type="text"> </li> 
 
     <li><label for="">Lorem ipsum dolor amet</label> <input type="text"> </li> 
 
     <li><label for="">Lorem </label> <input type="text"> </li> 
 
     <li><label for="">Lorem ipsum dolor</label> <input type="text"> </li> 
 
     <li><label for="">Lorem ipsum or</label> <input type="text"> </li> 
 
     <li><label for="">Lorem ipsum</label> <input type="text"> </li> 
 
    </ul> 
 
</div>

來源

2016-01-26 13:49:42

這是我會怎麼做：

<div class="container"> 
<h3 class="container-heading">heading</h3> 
<div class="form-item"> 
    <p class="form-item-name">General</p> 
    <p class="form-item-field"><input type="text"></p> 
</div> 


</div>

CSS：

.form-item{width:100%;} 
.form-item-name{width:50%; float:left;} 
.form-item-field{width:50%; float:left;}

來源

2016-01-26 13:53:22

對於像一個在你的OP可以使用表UI：

.textbox { 
 
    width: 400px; 
 
    border: solid black 2px; 
 
} 
 
.textbox h4 { 
 
    margin: 0; 
 
} 
 
table tr td:first-child { 
 
    width: 50%; 
 
} 
 
table tr td input { 
 
    width: 200px; 
 
} 
 
.textbox table { 
 
    padding: 10px; 
 
}

<div class="textbox"> 
 

 
    <h4>Info section</h4> 
 

 
    <table> 
 
    <tr> 
 
     <td>General</td> 
 
     <td> 
 
     <input type="text"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Board image</td> 
 
     <td> 
 
     <input type="text"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Board name</td> 
 
     <td> 
 
     <input type="text"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Board name</td> 
 
     <td> 
 
     <input type="text"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Add short domain</td> 
 
     <td> 
 
     <input type="text"> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
</div>

來源

2016-01-26 13:53:29

使用Flexbox的就可以輕鬆實現你want.There很多重量輕的框架，其幫助這種用例。使用這樣一個小例子framework,

Fiddle

<div> 
    <div class="row around-xs"> 
    <div class="col-xs-6 start-xs"> 
     General 
    </div> 
    <div class="col-xs-6"> 
     <input type="text"> 
    </div> 
    </div> 
    <div class="row around-xs"> 
    <div class="col-xs-6 start-xs"> 
     General 
    </div> 
    <div class="col-xs-6"> 
     <input type="text"> 
    </div> 
    </div> 
    <div class="row around-xs"> 
    <div class="col-xs-6 start-xs"> 
     General 
    </div> 
    <div class="col-xs-6"> 
     <input type="text"> 
    </div> 
    </div> 
    <div class="row around-xs"> 
    <div class="col-xs-6 start-xs"> 
     General 
    </div> 
    <div class="col-xs-6"> 
     <input type="text"> 
    </div> 
    </div> 
    <div class="row around-xs"> 
    <div class="col-xs-6 start-xs"> 
     General 
    </div> 
    <div class="col-xs-6"> 
     <input type="text"> 
    </div> 
    </div> 
</div>

我推薦一個框架，因爲您可以在短時間內提高生產力。

來源

2016-01-26 13:56:00 Raghu

首先使用語義HTML：如果你需要提高你的網站，使用標籤<form><input><label>等

<form> 
    <fieldset> 

    <h4>Info section</h4> 


    <div> 
     <label for="general">General</label> 
     <input id="general" type="text" placeholder="General"> 
    </div> 

    <div> 
     <label for="name">Board name</label> 
     <input id="name" type="text" placeholder="Board name"> 
    </div> 

    <div> 
     <label for="image">Board image</label> 
     <input id="image" type="image" placeholder="Board image"> 
    </div> 

    <div> 
     <label for="domains">Short domains</label> 
     <input id="domains" type="text" placeholder="Short domains"> 
    </div> 

    <div> 
     <label for="foo">Use short domains?</label> 
     <input id="foo" type="text" placeholder="Use short domains?"> 
    </div> 

    <div> 
     <label for="touch">Get in touch</label> 
     <input id="touch" type="text" placeholder="Get in touch"> 
    </div> 

    <div> 
     <label for="short_domain">Add short domain</label> 
     <input id="short_domain" type="text" placeholder="Add short domain"> 
    </div> 

    <div> 
     <label for="bar">Delete board</label> 
     <input id="bar" type="text" placeholder="Delete board"> 
    </div> 

    </fieldset> 
</form>

jsfiddle-link

一個form，我想在最後一個div代替label和inputDelete board應該是<button type="submit">Delete board</button>但我不清楚，也許你需要這個input

來源

2016-01-26 14:39:07

位置文本和文本輸入字段

回答

相關問題