Question

我正在尝试创建一个左右两个按钮的输入框。这是我到目前为止的弗兰肯斯坦怪物：http://vegan.fm/clone/?p=8679

它应该看起来像文本框+按钮：http://appsumo.com/welcome/?next=/

我已经能够很好地调整它，但是它似乎只是在不同的操作系统或计算机上混乱。

我通过痴迷地调整填充和边距值来做到这一点，但我的直觉告诉我有更好的练习。到目前为止，我还没有找到任何谷歌/ stackoverflow搜索。任何帮助表示赞赏。谢谢。

更新：我遇到的问题是按钮的“高度”值和输入框完全相同，但按钮总是高于输入框。

以下是一些代码：

    .halfbutton {
   border-top: 1px solid #f0d995;
   background: #806a43;
   padding: 0px 3px 0px 3px;
   background: -webkit-gradient(linear, left top, left bottom, from(#d1ad51), to(#806a43));
   background: -moz-linear-gradient(top, #d1ad51, #806a43);
   height: 30px;
   width:25px;
   -webkit-border-radius: 8px 0 0 8px;
   -moz-border-radius: 8px 0 0 8px;
   border-radius: 8px 0 0 8px;

   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }

对于输入框：

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">

    <input style="z-index:1999;height:30px;margin:0 -.1em 0 -.1em;border:1px solid;border-color:#a1a1a1;" size="20" type="text" name="s" id="s" value="<?php ... /> 
</form>

Answer 1

此刻，对齐对我来说似乎没问题（在Chrome中），但输入上没有边框，因此很难分辨出发生了什么。

我的评论 - 现在您将add'l搜索选项作为输入字段左侧的下拉列表，然后将“more”下拉列表添加到输入右侧的add'l选项中。我认为这不符合典型用户的搜索框模型，其中输入右侧的是提交/选项按钮。也许将选项按钮向右移动，然后将“更多”浮动为单独的按钮，在右侧（或下方）。

只是一个想法。

Answer 2

Dunno我理解这个问题是正确的要使其显示在您的链接中，您需要在输入表单中使用背景img;
您可以使用css3使其看起来像插入输入表单在css中

#inputform{
    background-color: #f7f7f7;
    -moz-box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1);
    -webkit-box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1);
    box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1);
    ...
}

评论中的链接与您网站上的代码相关联;

文本框与按钮齐平

2 个答案: