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

Question

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

我希望两个输入都浮动到父 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

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

信息图像{

浮动：对！重要；

显示：内联！重要；

右：4px；// OR// 右：40px；/ }

Answer 2

我不确定您希望它如何显示，但从感知的事物来看，这是解决方案。

的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>。我希望这对现在有所帮助。