CODEWITHSUNDEEP
htmlcss
hsp care
hsp care

Reputation: 117

How to display label, input and image in a single line?

this is screen shot when I am removing margin-left it's giving like this

Hi in the below code I want to display label, image and input in a single line for that I used inline-block but it's not working. Now it's displaying one by one.

html

<div class="person_pic">
    <label>Please upload your photo</label>
    <input  type='file' name="image" onchange="readURL(this);" />
    <img id="blah" src="#" alt="your image" />
    </div>

css

.person_pic {
 margin-left: 201px;
display: inline-block;
font-weight:bold;
}
.person_pic label{
font-weight:bold;
}

Upvotes: 3

Views: 15162

Answers (5)

Sumant Singh
Sumant Singh

Reputation: 1020

Define CSS following CSS

.column {  float: left; padding: 5px; }
.row::after {   content: "";  clear: both;  display: table; }

Then HTML Code

        <div class="row">
          <div class="column">
            <h5>User Pic</h5>
          </div>
          <div class="column">
            <img width="40px" height="50px" style="padding-bottom: 5px" src="./assets/images/camera.png" />
          </div>
          </div>

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

Now define white-space : nowarp; in your .person_pic class

as like this .

if you don't want to be remove margin-left 

.person_pic {
  margin-left: 201px;
  display: inline-block;
  font-weight: bold;
  white-space: nowrap;  // define white-space: nowarap 
}

Demo

Upvotes: 3

Shelly
Shelly

Reputation: 351

<span class="person_pic">
<label>Please upload your photo</label>
<input  type='file' name="image" onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</span>

.person_pic {
    margin-left: 201px;
    font-weight:bold;
}

Use span instead of div , as span is inline -block .

Upvotes: 3

Alexey
Alexey

Reputation: 3637

Well, actually, img, label and input, by default are put side by side.

Jfiddle

<label>Please upload your photo</label>
<input  type='file' name="image" onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />

It displays in a new line because you have a large margin. If you extend the page, it will be on the same line.

Removing the margin should solve your problem.

Upvotes: 3

stanze
stanze

Reputation: 2480

Remove margin-left from this class,

.person_pic { 
display: inline-block;
font-weight:bold;
}

Upvotes: 5

Related Questions