在同一条线上定位两个输入

Question

在“Wembury”下的任何选项卡中的http://www.southdevonaonb.org.uk/cordialemapping/上，我在同一行上有两个输入 - 第一个是复选框，第二个是图像（蓝色信息图标）。

我希望两个输入都浮动到父div的右侧，以便它们垂直显示为内联。

这是HTML：

Letterbox locations and results
<input type="image" align="right" id="info-image" class="info-image" src="images/info.png" title="Click for more information about this layer" onclick="layer0()" value='Info'/>
<input type="checkbox" id="layer0" onclick="toggleLayer(0)" unchecked><br />

CSS：

.info-image{
float:right !important;
display:inline !important;
}

#info-image{
float:right !important;
display:inline !important;
}

我尝试过：

我已经为输入图像提供了一个类和ID，并尝试强制它向右浮动以及尝试显示标记以获得类似的效果，但没有运气。我怎样才能做到这一点？

点击此处了解我要实现的目标：

http://www.southdevonaonb.org.uk/cordialemapping/help/screenshot1.png

Answer 1

试试这个，你必须设置图像的右侧

  

信息图像{

     

float：right！important;

     

显示：内联！重要;

     

右：4px; / 或//右：40px; /   }

Answer 2

我不确定你希望它出现的方式，但从感知的事情来看，这里是solution。

HTML：

<input id="info-image" class="info-image" align="right" type="image" src="images/info.png" title="Click for more information about this layer" onclick="layer100()" value="Info">
<br>
<input id="layer100" type="checkbox" unchecked="" onclick="toggleLayer(100)" style="margin-right: -15px; margin-top: 7px;">

CSS：

.info-image{
float:right !important;
display:inline !important;
}

#info-image{
float:right !important;
display:inline !important;
}

希望这有帮助。

修改

我刚收到您的屏幕截图通知并进行了一些修改。

HTML：

<div>
<p style="float: left; width: 70%;">Parish boundary line Parish boundary line</p>
<p>
<input align="right" type="image" value="Info" onclick="layer100()" title="Click for more information about this layer" src="images/info.png" class="info-image" id="info-image">
<input type="checkbox" unchecked="" onclick="toggleLayer(100)" id="layer100">
</p>
</div>
<div>
<p style="float: left; width: 70%;">Parish boundary line Parish boundary line</p>
<p>
<input align="right" type="image" value="Info" onclick="layer100()" title="Click for more information about this layer" src="images/info.png" class="info-image" id="info-image">
<input type="checkbox" unchecked="" onclick="toggleLayer(100)" id="layer100">
</p>
</div>
<div>
<p style="float: left; width: 70%;">Parish boundary line Parish boundary line</p>
<p>
<input align="right" type="image" value="Info" onclick="layer100()" title="Click for more information about this layer" src="images/info.png" class="info-image" id="info-image">
<input type="checkbox" unchecked="" onclick="toggleLayer(100)" id="layer100">
</p>
</div>

您只需要删除包含复选框和图片的<p>代码，然后使用上面提供的<p>代码复制完整的<div>代码。我希望现在有所帮助。