搜索栏和按钮css

时间:2014-02-14 16:01:43

标签: css search

无法正确排列搜索栏和搜索按钮。任何帮助都会很棒。

如果需要,我会发布更多代码。这是现场直播。

http://foyermakeover.businesscatalyst.com/index.html

我希望它与菜单对齐。感谢。

这是html。我正在使用两个css。一个来自Business Catalyst,名为Module something。我相信这个css文件控制着搜索框。我只是不知道要修改哪条规则。

<!-- Higher Menu Start -->
<!-- DC Mega Menu Start -->
<div class="fm_menu_top">
        <ul id="dc_mega-menu-white" class="dc_mm-white">
            <li><a href="/shop.html">SHOP </a></li>
            <li><a href="/gallery.html">GALLERY</a></li>
            <li><a href="#">DOOR BUILDER</a></li>
            <li><a href="#">STAIR BUILDER</a></li>     
            <li><a href="#">CONTACT US</a></li>

        </ul>


<!-- Higher Menu End -->
<!-- Search Begin -->

<form name="catsearchform60238" method="post" action="/Default.aspx?SiteSearchID=2433&PageID=/search.html"><div class="cat_textbox">
  <input name="CAT_Search" type="text" class="CAT_Searchy" id="CAT_Searchy" placeholder="Type text here..." value="" />
  <input class="fm_letsearch" type="image" src="/images/search.png" value="Search" /></div></form>
</div>

<!-- Search End -->

2 个答案:

答案 0 :(得分:0)

执行此操作的肮脏黑客将是设置负顶部。 添加到您的css矿石样式定义:

 .CAT_Searchy{
     position:relative;
     top:-18px
 }

哪个会像这样对齐:

enter image description here

或者只使用好的ole表布局。

答案 1 :(得分:0)

你可以包含bootstrap,然后使用内联列表排列你的链接和搜索 请参阅:http://getbootstrap.com/css/#type-lists