Question

我一直在四处寻找并且作为css的新手我不知道我能做些什么来确保我的提交按钮'快照'左侧的下拉选择器选项。目前，在不同的屏幕尺寸下，按钮移动得更远。输入和选择器显示为“快照”在一起，我只是不确定如何使用提交按钮执行此操作。最初按钮位于左侧，但我使用了浮动：右侧;把它移到右边。这是div的代码：

<div class="dm-reg">
<form action="http://detorr.co.uk/hosting/domainchecker.php" method="post">
<input type="hidden" name="direct" value="true" />
Domain: <input type="text" name="domain" /> <select name="text">
<option>.co.uk</option>
<option>.org.uk</option>
<option>.me.uk</option>
<option>.uk</option>
<option>.com</option>
<option>.net</option>
<option>.org</option>
<option>.eu</option>
<option>.biz</option>
</select>
<input type="submit" value="Go" />
</form>
</div>

目前正在使用的CSS：

.dm-reg input[type=submit]{
position:relative;
color:#ffffff;
background: #3b88d8;
background: -moz-linear-gradient(0% 100% 90deg, #377ad0, #52a8e8);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#377ad0));
border-top: 1px solid #4081af;
border-right: 1px solid #2e69a3;
border-bottom: 1px solid #20559a;
border-left: 1px solid #2e69a3;
-moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
float:right;
width:50px;
font-weight:bold;
font-family: arial;
}

如果可能的话，我想知道将提交按钮放在其他输入字段旁边的最佳方法，无论大小如何。我将分别更新我的手机和平板电脑模板。

请看这个小提琴： http://jsfiddle.net/Dtorr1981/vp0zwxsu/2/

最诚挚的问候娜

Answer 1

而不是float:left添加float:none; display:inline-block;

正如你提到它们是浮动的：左边是input.button ==＆gt;它出现在左侧＆安培; display：block in input.button ==＆gt;它出现在另一行

检查这个jsfiddle

http://jsfiddle.net/vp0zwxsu/3/

屏幕调整大小时如何修复输入旁边的按钮位置

1 个答案: