問題與邊框或填充html元素

Question

嘿傢伙我目前正試圖讓一個選擇菜單和一個按鈕的文本框都整合到一個大小的div乾淨，但即時運行到一個問題，其中每個元素有奇怪的邊界/邊緣，防止它從正常顯示（該按鈕會出現下面的文本框，然後選擇菜單）

繼承人的HTML進出口目前使用

<div class="content"> 
    <div class="search-panel"> 
     <div class="search-panel-logo"> 
      <img src="img.png" class="search-panel-logo-img" /> 
     </div> 

     <div class="search-panel-searchbar"> 
      <form class="search-panel-frm" action="" id="fsearchbar"> 
       <input class="search-panel-frm" type="text" id="tseachtext" name="tsearchtext" value="Search" /> 
       <select class="search-panel-frm" id="ssearchselect" name="ssearchselect"> 
        <option value="Cars">Cars</option> 
       </select> 
       <input class="search-panel-frm" type="button" id="bsearchgo" name="bsearchgo" value="Search!" /> 
      </form> 

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

和繼承人的CSS：

.content { 
    background:inherit; 
    width:950px; 
    height:600px; 
    margin: 0 auto; 
} 

.search-panel { 
    width:inherit; 
    height:500px; 
    background:#093; 
    margin:0 auto; 

} 
.search-panel-searchbar { 
    width:inherit; 
    height:30px; 

} 

.search-panel-searchbar-frm { 
    width:inherit; 
    height:inherit; 

} 

.search-panel-searchbar-frm-text { 
    width:60%; 
    height:70%; 

} 

.search-panel-searchbar-frm-select { 
    width:20%; 
    height:80%; 

} 

.search-panel-searchbar-frm-go { 
    width:20%; 
    height:80%; 

} 

任何想法，我可以添加到讓所有的元素出現在同一行而不是兩個，我已經嘗試過

border:0; 
margin:0; 

和它沒有解決這個問題。

Answer 1

爲了實現自己的目標，一些CSS招數都必須適用，請參閱下面的CSS：

CSS

/* wrapper */ 
.search-panel-searchbar { 
    width: 100%; 
    height: 30px; 
    overflow: hidden; 
} 

/* form elements must be wrapped and not a direct child of the form tag */ 
.search-panel-searchbar > form > div { 
    background-color: #fff; 
    width: 100%; 
    height:30px; 
} 

/* input[type="text"] */ 
.search-panel-searchbar-frm-text { 
    margin: 0; 
    padding: 0; 
    font-size: 12px; 
    line-height: 16px; 
    height: 16px; /* necessary to fix height issue on windows browsers */ 
    padding: 6px 0; 
    display: block; 
    border: 1px solid #ccc; 
    background-color:#fff; 
    width: 60%; 
    text-indent: 4px; 
    float: left; 
} 

/* select */ 
.search-panel-searchbar-frm-select { 
    margin: 0; 
    padding: 0; 
    font-size: 12px; 
    height: 30px; 
    padding: 6px 4px; 
    display: block; 
    border: 1px solid #ccc; 
    background-color:#fff; 
    width: 20%; 
    float: left; 
    margin-left:-1px; /* pull to prevent border overflow issue with % */ 
} 

/* input[type="button"] */ 
.search-panel-searchbar-frm-go { 
    margin: 0; 
    padding: 0; 
    font-size: 12px; 
    height: 30px; 
    padding: 6px 0; 
    display: block; 
    border: 1px solid #ccc; 
    background-color:#fff; 
    width: 20%; 
    float: left; 
    text-align:center; 
    margin-left:-1px; /* pull to prevent border overflow issue with % */ 
    cursor: pointer; 
} 

注：

CSS不包括小提琴例子給視覺顯示風格，如按鈕懸停和身體的背景。

---

請大家注意，不幸的是，每個瀏覽器（和OS！）以不同的方式在select交易，很可能是在一個或兩個瀏覽器，風格可能會有所不同。

的working Fiddle example!

屏幕截圖匹配上進行測試：

Linux操作系統Ubuntu 12.04

• 火狐12.0
• 鉻18.0.1025.151（開發版本130497大號inux下）

的Windows XP Profissionalversão2002 Service Pack 3的

• 的Internet Explorer 8.0.6001.18702
• 歌劇11.62
• 火狐3.6.16
• 的Safari 5.1.2 ^{（只選框高失敗）}
• Google Chrome 18.0.1025.1 68米
• K-Meleon的1.5.4 ^{（失敗的原因FONT-FAMILY）}

Windows 7家庭版Service Pack 1

• 的Internet Explorer 9.0.8112.164211C
• Opera 11.62
• Firefox 12.0
• Safari 5.1.4
• 谷歌瀏覽器18.0.1025.168米

，你將使用必須在最後包含字體系列聲明，以防止行高和文字大小的問題font-family。例如，font-family: Helvetica, Arial, sans-serif

Answer 2

刪除元素之間的空白。

此外，使用width: inherit可能不是一個好主意 - 請嘗試width: 100%而不是沿着這些線路。 height: inherit可以替換爲height: auto;（或者略去）。

Answer 3

1. 你發帖說並不適用於您發佈的HTML一些CSS類（如.search-panel-searchbar-frm-go）
2. 你應用類搜索面板FRM你的表單元素以及元素在表格內。你確定這是你想要的嗎？
3. 我看不到同樣的問題：輸入，選擇和輸入：按鈕都顯示在同一行上。

你可以嘗試添加這個簡單的修復，以保持在一行可能會給你一些想法的一切。

.search-panel-frm * 
{ 
white-space:nowrap; 
} 

如果所有的元素都已經在同一條線上，你想他們排隊更好地嘗試垂直對齊不同的值，如：

.search-panel-frm * 
{ 
vertical-align:top; 
}