分組標題元素

-1

我想將幾個元素分組在一起以製作標題。您可以在此鏈接中看到：http://postimg.org/image/l1kikhryn/ 正如您所看到的，我想將一組下拉菜單，圖片和連接到搜索欄的下拉菜單分組。然後我想將它與背後的塊彩色圖像對齊。分組標題元素

在圖片中，所有的位置都是手動移動以適應，但我想清理它們並將它們組合在一起，以便它們可以動態調整大小。我正在使用HTML和CSS。有任何想法嗎？

我不知道爲什麼這是得到一個沒有迴應的投票，但它很煩人。

來源

2014-07-10 user3822479

如果沒有代碼展示你嘗試過的東西，我們不能不提供幫助。我沒有倒下你，但這可能是原因。話雖如此，也許你可以實現已經存在的幾個響應式UI框架之一，如[Bootstrap]（http://getbootstrap.com/）或[Foundation]（http://foundation.zurb.com/）？ –

這非常有幫助。我對此很新，所以我認爲包括一張照片和一般想法就足夠了。我相信我僅限於使用html和css，因爲該項目沒有提到bootstrap或foundation，因此我只能使用它。 – user3822479

兩者主要是HTML和CSS框架。這些Javascript部分是可選的。 –

我把基本的HTML/CSS設計放在一起，模仿你鏈接的圖像。對我來說這是很好的做法，所以我不介意這種努力。這是JSFiddle sample I wrote。

下面是HTML：

<ul id="navbarList"> 
<li><div class="pictureBox"></div></li> 
<li> 
    <div class="navButton"> 
     <select id="firstSelect"> 
      <option value="one">one</option> 
      <option value="two">two</option> 
      <option value="three">three</option> 
      <option value="four">four</option> 
     </select> 
    </div> 
</li> 
<li><div class="navButton"> 
     <select id="firstSelect"> 
      <option value="one">one</option> 
      <option value="two">two</option> 
      <option value="three">three</option> 
      <option value="four">four</option> 
     </select> 
    </div> 
</li> 
<li><div class="navButton"> 
     <select id="firstSelect"> 
      <option value="one">one</option> 
      <option value="two">two</option> 
      <option value="three">three</option> 
      <option value="four">four</option> 
     </select> 
    </div> 
</li> 
<li><div class="inputText"><input type="text" name="query" value="search this"></div></li> 
    <li><input type="submit" name="submitButton"></li>

這是CSS：

ul#navbarList 
{ 
list-style:none; 
display:inline-block; 
width:85%; 
margin:35px; 
background-color: lightgray; 
} 

.pictureBox 
{ 
float:left; 
overflow:auto; 
border-style:solid; 
border-color:black; 
background-color:blue; 
width: 65px; 
height: 85px; 
margin: -10px; 
} 

.navButton 
{ 
float:left; 
border-style:solid; 
border-color:black; 
background-color:black; 
width: 75px; 
height: 24px; 
margin:20px 10px 10px 20px; 
} 

select#firstSelect 
{ 
width:75px; 
} 

.inputText 
{ 
float:left; 
border-style:solid; 
border-color:black; 
background-color:black; 
width: 160px; 
height: 25px; 
margin:20px 10px 10px 20px; 
} 

input[name="submitButton"] 
{ 
margin: 25px 0 10px 20px; 
}

享受！

來源

2014-07-10 03:20:55 BMcNamara

分組標題元素

回答

相關問題