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

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

嗯，事实上，IMG标签和输入，通过默认放在边b y方。

Jfiddle

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

它显示在一个新行，因为你有一个大比分。如果扩展页面，它将位于同一行。

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

Answer 2

删除利润率左，

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

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

现在，在您.person_pic类

因为这样定义white-space : nowarp;。

，如果你不想被删除margin-left

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

Demo