尝试从Amazon.com获得搜索栏外观

Question

<div class="input-group">
<select class="input-group-addon">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

<input id="email" type="text" class="form-control" name="email" placeholder="Email">

<button class="input-group-addon">Submit</button>
</div>

有人可以帮助我实现这个目标吗？

我完全迷失了，并且困惑为什么这就是我得到的

http://codepen.io/jpezninjo/pen/bgVyZp

Answer 1

试试这个

＆＃13;

＆＃13;

select {
  background: transparent;
  border: none;
  padding: 6px 12px;
}
button {
  padding: 6px 12px;
  background: transparent;
  border: none;
}
.input-group-addon {
  padding: 0!important;
}

＆＃13;

<link href="https://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-8">
    <div class="input-group">
      <span class="input-group-addon">
      <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
  </span>

      <input id="email" type="text" class="form-control" name="email" placeholder="Email">

      <span class="input-group-addon"> <button>Submit</button></span>
    </div>
  </div>
  <div class="col-md-2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<强>更新...

使用Bootstrap。你可以试试这个。不需要任何CSS样式。

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">    
        <div class="col-xs-8 col-xs-offset-2">
		    <div class="input-group">
                <div class="input-group-btn search-panel">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    	<span id="search_concept">All</span> <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#contains">test1</a></li>
                      <li><a href="#its_equal">test2</a></li>
                      <li><a href="#greather_than">test3</a></li>
                      <li><a href="#less_than">test4</a></li>
                      <li class="divider"></li>
                      <li><a href="#all">test5</a></li>
                    </ul>
                </div>
                <input type="hidden" name="search_param" value="all" id="search_param">         
                <input type="text" class="form-control" name="x" placeholder="Search term...">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
                </span>
            </div>
        </div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;