Question

我正在努力实现以下目标：

左侧的文字列表和右侧的文字输入。

这是我的尝试，但它既不是很好用，也不是很优雅：

.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>

我可以做到，我希望以另一种更优雅的方式实现目标吗？

Answer 1

使用 Flexbox ，您可以轻松实现您的目标。有许多轻量级框架可以帮助解决此类使用案例。使用此类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>

我推荐一个框架，因为你可以在短时间内提高工作效率。

Answer 2

稍微改变HTML结构，使用 Flexbox ，您可以执行此操作

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

我就是这样做的：

<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;}

Answer 4

对于类似于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>

Answer 5

首先使用语义HTML：如果您需要改善网站上的<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> label等。

input

jsfiddle-link

我认为在最后一个div而不是Delete board和<button type="submit">Delete board</button> input应该是{{1}}但我不清楚，也许你需要这个{{1} }

定位文本和文本输入字段列表

5 个答案: