如何在同一行显示标签、输入框和图片？

Question

您好，在下面的代码中，我希望将标签、图像和输入框显示在同一行，因此我使用了inline-block但不起作用。 现在它一个接一个地显示。

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

- hsp care

---

我有一个 jsfiddle，但似乎无法正常工作 http://jsfiddle.net/BrettEast/5qqf80bh/ - 你到底想做什么？ - Brett East

Answer 1

将这个类的 margin-left 属性移除：

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

- stanze

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

因为您设置了大的边距，所以它会在新一行显示。如果您扩展页面，它将与同一行。

删除边距应该可以解决您的问题。

- Alexey

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是内联块。

- Shelly

Answer 4

现在在你的 .person_pic 类中定义 white-space:nowrap;，像这样：

如果你不想移除 margin-left，就像这样。

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

演示

- Rohit Azad Malik

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>

- Sumant Singh