如何讓這個大的圖像與更小的圖像並排？

我希望出現在我的html5頁面上的理想結果是這樣的;如何讓這個大的圖像與更小的圖像並排？

然而，一個我現在有我的HTML頁面上是這樣的;

的HTML代碼我已經是這樣的;

<form data-ng-controller="MyController"> 
    <switch name="onOff" ng-model="onOff" on="on" off="off"></switch> 
</form> 

<img src = "img/tube.jpg"/>

開關圖標是從angular-ui-switch創建的。我應該如何將管放置在開關旁邊並使其與開關尺寸相同？

編輯：謝謝你的評論，現在有一個密切的解決方案。

<form data-ng-controller="MyController"> 
    <switch name="onOff" ng-model="onOff" on="on" off="off"></switch> 
</form> 

<img src = "img/tube.jpg" height=80 width=80>

現在管比較小。但是，它位於開關下方，而不是開關旁邊。如何讓它出現在交換機旁邊？

來源

2015-09-18 user781486

這基本上是一個'CSS'問題。所以你可以告訴我們一些'CSS'或**'jsfiddle' **將是偉大的.. –

給予相同的高度和顯示器：inline-block的;對這兩個對象。 –

一套固定的高度和圖像的寬度和運用浮動：左兩個圖像 –

使用inline-block元素顯示開關的圖像右

<form data-ng-controller="MyController" style="display: inline-block;"> 
    <switch name="onOff" ng-model="onOff" on="on" off="off"></switch> 
</form> 

<img src = "img/tube.jpg" height="100px" width="100px"/>

來源

2015-09-18 07:26:22

謝謝！驗證是正確的解決方案！ – user781486

因此，爲了使圖像並排顯示，建議始終使用'style =「display：inline-block;」'？ – user781486

快樂幫:)，默認情況下表單元素的類型塊，這意味着表單標籤後的任何HTML元素將通過使顯示器顯示從下一行即下面的表單元素：inline-block的強制下一個HTML元素只是表格後出現標記是否有空格 –

您可以使用最大寬度重新調整你的形象，例如

#max { 
 
    max-width:100px; 
 
    }

<img src="http://i.stack.imgur.com/GXsb3.jpg"> 
 
<img src="http://i.stack.imgur.com/GXsb3.jpg" id="max">

來源

2015-09-18 07:23:08 andyduly98

嘗試添加在你的img標籤寬度或高度

<img src = "img/tube.jpg" width="75px"/>

來源

2015-09-18 07:24:52 Biboy

如何讓這個大的圖像與更小的圖像並排？

回答

相關問題