Question

我想将几个元素组合在一起以形成标题。这可以在以下链接中看到：http://postimg.org/image/l1kikhryn/ 如您所见，我想将一组下拉菜单，一张图片和一个连接到搜索栏的下拉菜单分组。然后我想把它背后的块颜色图像排成一行。

在图片中，所有的位置都手动移动到适合但我想清理它并将它们组合在一起，以便它们可以动态调整大小。我正在使用html和css。有任何想法吗？

我不知道为什么这会得到单一的投票而没有回应，但这非常令人讨厌。

Answer 1

我整理了一个基本的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;
}

享受！

分组标题元素

1 个答案: