CODEWITHSUNDEEP
htmlcss
user2703522
user2703522

Reputation: 169

Position a list of text and text input fields

I am trying to achieve the following:

enter image description here

A list of text on the left and text input on the right.

This is my attempt, but it is neither working very well or is rather elegant: 

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

Can I do, what I want to achieve in another more elegant way?

Upvotes: 1

Views: 104

Answers (5)

Nenad Vracar
Nenad Vracar

Reputation: 122087

Change HTML structure a bit and with Flexbox you can do this 

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

Upvotes: 1

Igor Ivancha
Igor Ivancha

Reputation: 3451

First of all use semantic HTML: if you need improve a form on your site, use tags <form> <input> <label> etc.

<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

and I think in the last div instead label and input Delete board should be <button type="submit">Delete board</button> but I don't know clearly, maybe you need this input

Upvotes: 0

Raghu
Raghu

Reputation: 1009

Using Flexbox you can easily achieve what you want.There are many light weight frameworks which help for such use cases.One small example using such a 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>

I recommend a framework because you can be more productive in short time.

Upvotes: 2

Alex Char
Alex Char

Reputation: 33218

For UI like the one in your OP you can use table:

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

Upvotes: 1

Srikanth Koneru
Srikanth Koneru

Reputation: 264

This is how I would do it :

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

Upvotes: 1

Related Questions