CODEWITHSUNDEEP
html
user1801279
user1801279

Reputation: 1793

A very simple HTML clarification needed

I have the following piece of code

           <li>
                 <label> Label: </label>
                  <p>I am label 1 </p>
               </li>

This prints out like 

 1.  Label:

    I am label 1

how do I modify this so as it prints 

Label: I am label 1

Upvotes: 0

Views: 93

Answers (6)

Eric Jablow
Eric Jablow

Reputation: 7899

Labels make sense only when correlated with <input> elements. When a user clicks on a <label> element, the <input> it points to gets the focus and is selected. Checkboxes are toggled, etc.

<li>
    <label for="quantity">Quantity</label>
    <input id="quantity" type="number"
           min="0" placeholder="Quantity (0 to delete)">
<li>

The label points to the input. With CSS, you can give form label a width of 100px and float it to the left. You can tell form li to clear left. form ol should have list-style-type: none. There's no need for <p> here. Work with the system; don't fight it.

If you just have plain text, use plain text, not labels. On the other hand, you may want to style a definition list as in the old <dl compact>. I'm not sure how you get the <dt> and <dd> on the same line.

Upvotes: 0

Moob
Moob

Reputation: 16204

<p> is a block-level element so you need to allow it to flow by using display:inline or inline-block (or float if you must):

li p {display:inline-block;}

http://jsfiddle.net/AsY29/

Upvotes: 2

Black Sheep
Black Sheep

Reputation: 6694

I suppose that you begin with a <ul> or <ol> tag than can you do like this:

ul li p {
  display: inline;
}

or

ol li p {
  display: inline;
}

LIVE DEMO

Upvotes: 0

aarryy
aarryy

Reputation: 502

<li>
    <label> Label: </label>
    <span>I am label 1 </span>
</li>

Use span instead of p if you want it to display in the same line. p is a block level element

Upvotes: 1

im_benton
im_benton

Reputation: 2621

li label, li p {
   float: left;
}

Upvotes: 0

HC_
HC_

Reputation: 1060

       <li class="myli">
             <label class="mylabel"> Label: </label>
              <p class="inline-p">I am label 1 </p>
       </li>

CSS

.mylabel {display:inline-block;}
.inline-p {display:inline-block;}
li.myli {list-style-type:none;}

should work

Upvotes: 0

Related Questions