gpt4 book ai didi

HTML/CSS 两个相邻的搜索框

转载 作者:太空宇宙 更新时间:2023-11-04 11:07:36 24 4
gpt4 key购买 nike

我正在尝试创建一个搜索栏,就像人们会在 yelp 上找到的那样。两个条形并排居中。根据下面的代码,我无法让它们居中。我的想法是创建两列并将它们并排放置,一个向右拉,另一个向左拉,但我运气不佳。有什么建议吗?

<HTML>
<form>
<div class="row">
<div class="col-sm-5 portfolio-item">
<div class="input-group" display="inline">
<input id="searchone" name="search" type="search" value="<?php echo $search_word;?>" class="form-control" placeholder="Name">
</div>
</div>

<div class="col-sm-5 portfolio-item">
<div class="input-group" display="inline">
<input id="searchtwo" name="search" type="search" value="<?php echo $search_word;?>" class="form-control" placeholder="Location">
<div class="input-group-btn">
<button class="btn btn-default btn" name="submit" type="submit">
<span id="glyph" class="glyphicon glyphicon-search" name="submit"></span>
</button>
</div>
</div>
</div>
<!-- /.row -->

 <CSS>
.row .col-sm-5 .input-group .form-control{
width:300px;
float:center;}

最佳答案

这可能对你有帮助

HTML

<div class="row">
<div class="col-sm-5 col-sm-offset-1 portfolio-item">
<div class="input-group" display="inline">
<input id="searchone" name="search" type="search" value="<?php echo $search_word;?>" class="form-control" placeholder="Name">
</div>
</div>
<div class="col-sm-5 col-sm-pull-1 portfolio-item">
<div class="input-group" display="inline">
<input id="searchtwo" name="search" type="search" value="<?php echo $search_word;?>" class="form-control" placeholder="Location">
<div class="input-group-btn">
<button class="btn btn-default btn" name="submit" type="submit"> <span id="glyph" class="glyphicon glyphicon-search" name="submit"></span>

</button>
</div>
</div>
</div>

fiddle here

关于HTML/CSS 两个相邻的搜索框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33850683/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com