如何将这个大图像与较小的图像并排放置？

Question

我希望在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>

管子现在变小了。但是，它位于开关下方而不是开关旁边。如何让它出现在开关旁边？

Answer 1

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

Answer 2

您可以使用最大宽度重新缩放图片，例如

＆＃13;

＆＃13;

$people = array(
    array
    (
        'Name' => '<a href="http://gotourl.com?user=john+vz">john</a>',
        'Sex' => 'M'
    ),
    array(
        'Name' => '<a href="http://gotourl.com?user=sue+hp">sue</a>',
        'sex' => F
    )
);

$json = json_encode($people);

＆＃13;

#max {
  max-width:100px;
  }

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试在img标签中添加宽度或高度

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