使用CSS对齐徽标和搜索框

Question

我在尝试获取日志和搜索框时遇到问题。左侧的徽标和右侧的搜索框。

＆＃13;

＆＃13;

header {
                background:#383838;
                height: 130px;
                border-top:10px solid #2C2C2C; border-bottom:1px solid #2C2C2C;
                }
    
        .wrap-header {
               width:960px;
               position:relative;
               margin: 0px auto;
                }
    
        header #logo {
               position:absolute;
               top:40px;
               left: 30px;
               width: 100%;
               }
    
        header #search,
     
        header #submit {
    
        position: absolute;
                 top: 60px;
                 right: 20px;
                 width: 258px;
                 z-index: 15;
                 }
    
        header #search {
        padding: 5px 9px;
        height: 20px;
        width: 300px;
        border: 1px solid #a4c3ca;
        background: #f1f1f1;
        border-radius: 50px 3px 3px 50px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);            
        }
    
        header #submit
        {       
        background-color: #6cbb6b;
        background-image: linear-gradient(#95d788, #6cbb6b);
        border-radius: 3px 50px 50px 3px;    
        border-width: 1px;
        border-style: solid;
        border-color: #7eba7c #578e57 #447d43;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 
                    0 1px 0 rgba(255, 255, 255, 0.3) inset;
        height: 35px;
        margin: 0 0 0 10px;
        padding: 0;
        width: 90px;
        cursor: pointer;
        font: bold 14px Arial, Helvetica;
        color: #23441e;    
        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
        }
    
        header #submit:hover {       
        background-color: #95d788;
        background-image: linear-gradient(#6cbb6b, #95d788);
        }   
    
        header #submit:active {       
        background: #95d788;
        outline: none;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;        
        }
    
       header #submit::-moz-focus-inner {
       border: 0;  /* Small centering fix for Firefox */
       }
    
       header #search::-webkit-input-placeholder {
       color: #9c9c9c;
       font-style: italic;
       }

＆＃13;

<header> 
      
    	<div class="wrap-header">
    		 <div id="logo"><a href="index.php"><img src="./images/logo.png"/></a></div>
    		<form id="searchbox" action="search.php" method="post">
            <input id="search" type="text" placeholder="Type here" name="search">
            <input name="submit" type="submit" id="submit" formmethod="POST" value="Search">
            </form>
    	</div>
    </header>

＆＃13;

＆＃13;

＆＃13;

正在发生的事情是徽标没问题，但搜索框的提交按钮位于搜索文本框内。

Answer 1

只需编辑以下css header #search类

header #search {
    padding: 5px 9px;
    height: 20px;
    margin-right: 90px;
    width: 300px;
    border: 1px solid #a4c3ca;
    background: #f1f1f1;
    border-radius: 50px 3px 3px 50px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}

它可以很好地完成这项工作..这是预览

修改

Answer 2

您需要将min-width添加到header元素

Herr的工作jsfiddle http://jsfiddle.net/otbay822/

Answer 3

 <header> 
        <div class="wrap-header">
            <div id="logo" class="inline-div">
                <a href="index.php"><img src="./images/logo.png"/></a>
            </div>
            <div class="inline-div">
                <form id="searchbox" action="search.php" method="post">
                    <input id="search" type="text" placeholder="Type here" name="search">
                    <input name="submit" type="submit" id="submit" formmethod="POST" value="Search">
                </form>
            </div>
        </div>
    </header>

CSS：

.inline-div{
    display:inline-block;
}

我在一个div中包装了表单，并且同时在表单和徽标div中应用了一个类。然后简单地应用display：inline-block;

希望它有所帮助。