如何在單行顯示標籤，輸入和圖像？

this is screen shot when I am removing margin-left it's giving like this 如何在單行顯示標籤，輸入和圖像？

嗨在下面的代碼我想在單行顯示標籤，圖像和輸入，我用內聯塊，但它不工作。現在它逐個顯示。從這個類

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

來源

2015-04-03 hsp care

我有一個的jsfiddle，但它似乎是工作http://jsfiddle.net/BrettEast/5qqf80bh/ - 什麼你是在努力做到嗎？ – 2015-04-03 06:34:37

看到我的sceren鏡頭 – 2015-04-03 06:59:27

嗯，事實上，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" />

它顯示在一個新行，因爲你有一個大比分。如果擴展頁面，它將位於同一行。

刪除邊距應該可以解決您的問題。

來源

2015-04-03 06:36:04 Alexey

刪除利潤率左，

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

來源

2015-04-03 06:34:19 stanze

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

來源

2015-04-03 06:38:57 Shelly

現在，在您.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

來源

2015-04-03 07:02:54

它不起作用 – 2015-04-03 07:08:32

但它的工作在我的演示鏈接http://jsfiddle.net/rbb2g9cv/ – 2015-04-03 07:09:36

但在我的頁面它不工作 – 2015-04-03 07:11:06

如何在單行顯示標籤，輸入和圖像？

回答

相關問題