Displaying elements inline with HTML?

Question

I am trying to create a web application and in it I want these two fields to display inline(check the Image below). Now the BugID is an <input> element and the Description is a <textarea>. Currently I have this:

<div class="some">
  <h3 id="title1">Bug ID:<span class="required">*</span></h3>
  <h3 id="title">Enter Description:<span class="required">*</span></h3>
  <br/>
  <div class="inputs">
  <input size="8" maxlength="8" name="BugID" type="text" id="BugID" placeholder="Bug ID" style="width:100px" />
  <textarea rows="5" id="Summary" name="summary" placeholder="Please Enter a Summary of the Bug" ></textarea>
   </div>
   </div>

And the CSS:

.inputs input, textarea{
      display:inline;
}

Is this wrong? How should I be doing this?

Current Implementation

@RocketHazmat Old comment, I know. But `` elements are `inline-block` by default. — Swivel, Oct 02 '15 at 16:59

score 6 · Accepted Answer · answered Mar 01 '12 at 19:50

6

Is this what you want?

   .inputs input, textarea{
          display:inline;
          float:left;

    }

answered Mar 01 '12 at 19:50

wwv

891
5
14

score 1 · Answer 2 · answered Mar 01 '12 at 19:50

Try this:

#BugID, #Summary
{
    display: inline-block;
    float: left;
}

.clear
{
    clear: both;
}

And add an extra div after both fields that has class="clear"

Edit: Use the below sample, I've just tested it and it will align the titles and fields inline for you

<style>
#BugID, #Summary, h3
{
    display: inline-block;
    float: left;
}

#BugID, #title1
{
    width: 100px;
}

.clear
{
    clear: both;
}
</style>

<div class="some">
  <h3 id="title1">Bug ID:<span class="required">*</span></h3>
  <h3 id="title">Enter Description:<span class="required">*</span></h3>
  <div class="clear"></div>
  <div class="inputs">
  <input size="8" maxlength="8" name="BugID" type="text" id="BugID" placeholder="Bug ID" style="width:100px" />
  <textarea rows="5" id="Summary" name="summary" placeholder="Please Enter a Summary of the Bug" ></textarea>
   </div>
   </div>

score 0 · Answer 3 · answered Mar 01 '12 at 19:51

0

I will probably get shot down for this, but personally I would use a table because your layout is looking like a table.

answered Mar 01 '12 at 19:51

TimCodes.NET

4,601
1
25
36

Tables should only be used for tabular data, not for aligning form elements. :-P – gen_Eric Mar 01 '12 at 19:55
ahh the CSS purists are coming! Am I allowed to use tables to eat from? :P – TimCodes.NET Mar 01 '12 at 19:57
You can eat of the table if you want, I prefer using a plate. :-P – gen_Eric Mar 01 '12 at 20:02

score 0 · Answer 4 · answered Mar 01 '12 at 19:59

0

you can use table tag. In this case you will need 2 rows and 2 columns.

answered Mar 01 '12 at 19:59

lolo

17,392
9
25
49

score 0 · Answer 5 · answered Mar 01 '12 at 20:01

<input> are inline elements by default. You need to change the <h3>s to inline (as those are block elements).

I also suggest not using <h3> tags for anything other than what they are meant for. They are meant to denote headers/subheaders, not for formatting text. May I suggest the <label> tag?

<div class="some">
  <label id="title1" for="BugID">Bug ID:<span class="required">*</span></label>
  <label id="title" for="Summary">Enter Description:<span class="required">*</span></label>
  <br/>
  <div class="inputs">
     <input size="8" maxlength="8" name="BugID" type="text" id="BugID" placeholder="Bug ID" style="width:100px" />
     <textarea rows="5" id="Summary" name="summary" placeholder="Please Enter a Summary of the Bug" ></textarea>
  </div>
</div>

DEMO: http://jsfiddle.net/vW3GL/

Starx · Answer 6 · 2016-06-03T09:57:31.793

I will suggest a better option. Update your markup structure to a more structure one. May be something like this

<div class="some">
    <div class="input">
      <h3 id="title1">Bug ID:<span class="required">*</span></h3>
      <input size="8" maxlength="8" name="BugID" type="text" id="BugID" placeholder="Bug ID" style="width:100px" />
    </div>
    <div class="input">
      <h3 id="title">Enter Description:<span class="required">*</span></h3>
      <textarea rows="5" id="Summary" name="summary" placeholder="Please Enter a Summary of the Bug" ></textarea>
    </div>
</div>

Now the fix: CSS

.input { display: inline-block; display: table-cell; vertical-align: top; }

Demo

Displaying elements inline with HTML?

6 Answers6