如何在一行中显示标签，输入和图像？

Question

嗨，在下面的代码中，我想在一行中显示标签，图像和输入，因为我使用的是内联块，但它不起作用。现在它一个接一个地显示。

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

Answer 1

从此课程中删除margin-left，

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

Answer 2

嗯，实际上，img，label和input默认是并排放置。

Jfiddle

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

它显示在一个新行中，因为你有一个很大的余量。如果您扩展页面，它将在同一行。

删除保证金可以解决您的问题。

Answer 3

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

使用span而不是div，因为span是inline -block。

Answer 4

现在在white-space : nowarp;班级

中定义.person_pic

就像这样。

如果您不想删除margin-left

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

Demo

Answer 5

在CSS之后定义CSS

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

然后是HTML代码

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