使搜索框中心

這應該是一個相對容易的問題。雖然我還沒有找到一個解決方案，因爲我是一個初學者。我想要做的是以搜索框爲中心。在HTML如下：使搜索框中心

<div class="colums"> 
    <li class="share"> <a target="_blank" href="#"></a> 

    </li> 
    <div id='search-box'> 
     <form action='/search' id='search-form' method='get' target='_top'> 
     <input onwebkitspeechchange="voiceInputOver(this.value)" x-webkit-speechname='q' 
     placeholder='Search Contrabang...' type='text' /> 
     </form> 
    </div> 
    </div> 
    <div class="colums"> 
    <div class="cntratop"> 
     <ul> 
     <li class="live"> <a target="_blank" href="#">+Contrabang</a> 

     </li> 
     <li><a target="_blank" href="#">Blog</a> 

     </li> 
     <li><a target="_blank" href="#">Events</a> 

     </li> 
     <li><a target="_blank" href="#">About</a> 

     </li> 
     <li><a target="_blank" href="#">Contact</a> 

     </li> 
     </ul> 
    </div> 
    </div> 
    <div class="columa"> 
    <div id="text-display"> <span>Your Daily Dose of Contrabang</span> 
    </div> 
    </div>

的CSS如下：

.columa { 
    background:transparent; 
    width: 960px; 
    height: 500px; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
    padding: 0px; 
} 
.colums { 
    background:transparent; 
    width: 960px; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
    padding: 0px; 
} 
.cntratop { 
    font-family: sans-serif; 
    font-size: 14px; 
} 
.cntratop ul { 
    list-style:none; 
    margin-top:12px; 
    background:; 
    width:760px; 
    padding:0px 0px 0px 0px; 
    margin-left: auto; 
    margin-right: auto; 
} 
.cntratop li { 
    display:inline-block; 
} 
.cntratop li:first-child { 
    margin-left:0px; 
} 
/*navbar text*/ 
.cntratop a { 
    display:inline; 
    margin-left: -9px; 
    padding:15px; 
    text-decoration:none; 
    color:#999; 
    cursor:pointer; 
} 
.cntratop a:hover, 
/* 
.cntratopli.live*/ 
a { 
    font-weight:bold; 
    color:#E94F78; 
} 
#search-box { 
    list-style-type: none; 
    display: inline; 
    margin-left: 0px; 
    margin-right:0px; 
} 
#search-form { 
    width:0px; 
    background-color: transparent; 
    position: relative; 
    margin-top: -23px; 
} 
#search-box input[type="text"] { 
    width: 760px; 
    font-family:Georgia; 
    font-style: italic; 
    font-size: 90.0%; 
    padding: 3px 2 2px 10px; 
    color: #999; 
    outline: none; 
} 
#search-text { 
    font-size: 13px; 
    font-family:Georgia; 
    font-style: italic; 
    border-width: 0; 
    background: transparent; 
} 
#search-button { 
    position: absolute; 
    top: 0; 
    right: 0; 
    height: 32px; 
    width: 80px; 
    font-size: 13px; 
    color: #fff; 
    text-align: center; 
    line-height: 0px; 
    border-width: 0; 
    background-color: #3d3d3d; 
    cursor: pointer; 
} 
#text-display { 
    background-color:#E94F78; 
} 
#text-display { 
    top:; 
    position: relative; 
    display:inline-block; 
    padding:5px 10px; 
    font-family: sans-serif; 
    font-weight:bold; 
    font-size:50px; 
    color: white; 
    text-align: center; 
    line-height: 1.2em; 
    margin:50px; 
}

來源

2013-01-13 Kadeem Laurie

** + 1 **非常好的問題！ – arttronics

#search-form { 
    /* width:0px; */ 
    background-color: transparent; 
    position: relative; 
    margin-top: -23px; 
}

去除#search-form的width:0px應該可以解決這個問題。您的.colums類中的text-align:center樣式似乎可以控制搜索輸入的對齊方式。

希望能幫到:)

來源

2013-01-13 01:19:50 jbiddick

非常感謝。非常感謝。 –

** + 1 **好的答案。 – arttronics

使搜索框中心

回答

相關問題