css - 如何在 CSS 中重现以下效果,卡在填充(我认为)Bootstrap 3.0

标签 css html twitter-bootstrap

我已经尝试了所有我能想到的方法,但我无法以这种方式重现此表单:

我想让它看起来和图片一模一样,但我有以下问题:

按钮和最后的文本输入没有保持内联。不知道如何解决这个问题并可能调整其他按钮的大小,使它们看起来像图片中的那样。 我不能使用已经导入到 html 中的特定字体(我已经尝试使用 !important 函数将它们添加到 css 中,但仍然无效) 按钮颜色问题。

我真的没有更多想法了。我对这一切都很陌生。

有人可以帮我进行必要的修改以重现图片中的表格吗?

这是我现在拥有的:

http://www.bootply.com/x59KVak

最佳答案

将两个元素包裹在一个div中,左右浮动:BOOTPLY

<div>
<input style="float:left">
<button style="float:right"></button>
</div>

关于css - 如何在 CSS 中重现以下效果,卡在填充(我认为)Bootstrap 3.0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24810912/

相关文章:

html - 从 Bootstrap Accordion 中删除边框

php - 从数据库中获取一个值,并使用 for 循环填充 php 中的下拉菜单

javascript - iOS 7 视口(viewport)元标记更改

php - 如何在 yii 中使用 radioButton 1

javascript - Grails:twitter bootstrap 3 模式在每次迭代中都有相同的内容

css - 用于手机、平板电脑和桌面的 Bootstrap 网格布局

html - 如何向该厨房添加新的无序(元素符号)列表?

javascript - 如何验证在单击按钮时创建的字段

CSS 下拉菜单显示不正确

ruby-on-rails-3 - Bootstrap 导航栏折叠时最简单的更改方法(使用 bootstrap gem)