Question

<div style="width: 100%; overflow: hidden;">
<div style="margin-left: 100px; width: 600px; float: left;">
<div class="description"> 
<h2 style="color:blue">Select the appropriate version</h2>
</div>
<select>
 <option value="" disabled selected>Select version</option>
 <option value="" disabled selected>Select feature</option>
 <option value="A"> A     </option>
 <option value="B"> B </option>
 <option value="C"> C</option>
</select>

<div style=" margin-left: 350px; width: 600px; float: left;">
<div class="description">
<h2 style="color:blue">Select the appropriate category</h2>
</div>
<select>
 <option value="" disabled selected>Select feature</option>
 <option value="" disabled selected>Select category</option>
 <option value="A"> A     </option>
 <option value="B"> B </option>
 <option value="C"> C</option>
</select>

<div style="margin-left: 620px;  width: 600px; float: left;">
<div class="description">
<br>
<h2 style="color:blue">Select the feature</h2>
</div>
<select>
 <option value="" disabled selected>Select feature</option>
 <option value="" disabled selected>Select category</option>
 <option value="A"> A     </option>
 <option value="B"> B </option>
 <option value="C"> C</option>
</select>
</div>
</div>

我希望下拉列表中的三个div在水平方向上彼此相邻。我尝试过使用float，inline和inline块。如何在HTML中完成。

Answer 1

<div style="float:left">
dropdown1
</div>
<div style="float:left">
dropdown2
</div>
<div style="float:left">
dropdown3
</div>

这肯定会奏效。

代码中的问题是宽度过大。最好是将宽度设为％而不是px。

Answer 2

首先，您的代码格式错误。

您正在使用7 Div，但缺少2个Div结束标记。正确关闭Div标签。

您还要修正所有3个分区的宽度，因此如果屏幕尺寸小于3 div的组合宽度，则div将不再水平显示。给出宽度相对像width:30%。

同时从元素中删除边距。请使用Padding代替div之间的空格。

<html>
<body>
<div style="width: 100%; overflow: hidden;">
<div style=" width: 33%;float: left;">
<div class="description"> 
<h2 style="color:blue">Select the appropriate version</h2>
</div>
<select>
 <option value="" disabled selected>Select version</option>
 <option value="" disabled selected>Select feature</option>
 <option value="A"> A     </option>
 <option value="B"> B </option>
 <option value="C"> C</option>
</select>
</div>
<div style="float: left;width: 33%;">
<div class="description">
<h2 style="color:blue">Select the appropriate category</h2>
</div>
<select>
 <option value="" disabled selected>Select feature</option>
 <option value="" disabled selected>Select category</option>
 <option value="A"> A     </option>
 <option value="B"> B </option>
 <option value="C"> C</option>
</select>
</div>

<div style=" float: left;width: 33%;">
<div class="description">
<br>
<h2 style="color:blue">Select the feature</h2>
</div>
<select>
 <option value="" disabled selected>Select feature</option>
 <option value="" disabled selected>Select category</option>
 <option value="A"> A     </option>
 <option value="B"> B </option>
 <option value="C"> C</option>
</select>
</div>
</div>
</body>
</html>

Answer 3

问题在于您的代码中有3个未关闭的div标签和大量左边距加上尝试使用宽度和边距％{/ p>

[Check pen]    (http://codepen.io/anon/pen/gPzJpr)

Answer 4

代表html

<div class="container">
  <div id="firstDiv">
    <h1>Select the appropriate version</h1>
    <select class="" name="">
      <option value="" disabled selected>Select version</option>
      <option value="" disabled selected>Select feature</option>
      <option value="A"> A     </option>
      <option value="B"> B </option>
      <option value="C"> C</option>
    </select>
  </div>

  <div id="secondDiv">
    <h1>Select the appropriate version</h1>
    <select class="" name="">
      <option value="" disabled selected>Select version</option>
      <option value="" disabled selected>Select feature</option>
      <option value="A"> A     </option>
      <option value="B"> B </option>
      <option value="C"> C</option>
    </select>
  </div>

  <div id="thirdDiv">
    <h1>Select the appropriate version</h1>
    <select class="" name="">
      <option value="" disabled selected>Select version</option>
      <option value="" disabled selected>Select feature</option>
      <option value="A"> A     </option>
      <option value="B"> B </option>
      <option value="C"> C</option>
    </select>
  </div>
</div>

代表css：

div{
    display: inline-block;
    position: relative;
    margin: 5px;
    padding: 15px;
  }
  #firstDiv{
    background-color: #ccc;
  }
  #secondDiv{
    background-color: #eee;
  }
  #thirdDiv{
    background-color: #aaa;
  }

就像@Maihan Nijat所说的那样，使用外部CSS让你更容易调试。

Answer 5

使用inline-block并正确填写所有divs。

以下是一个例子：

.selection {
  display: inline-block;
}
h1{
  display: inline-block;
  font-size: 14px;
}

<div>
  <div class="selection">
    <h1>Select Option</h1>
    <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </div>  
  <div class="selection">
    <h1>Select Option</h1>
    <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </div>  
  <div class="selection">
    <h1>Select Option</h1>
    <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </div>
</div>

Answer 6

我对您的代码进行了一些更改。解决此问题的绝对最简单的方法是确保每个元素的宽度可以在屏幕上彼此相邻。这不仅要求文本不要太大，而且要明确定义的width不会溢出。

解决问题的简单方法是将display: inline-block;放在您想要并排的元素上。

＆＃13;

.left {
  display: inline-block;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>

  <div class="left">
    <div class="description">
      <h2 style="color:blue">Select the appropriate version</h2>
    </div>
    <select>
      <option value="" disabled selected>Select version</option>
      <option value="" disabled selected>Select feature</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  </div>

  <div class="left">
    <div class="description">
      <h2 style="color:blue">Select the appropriate category</h2>
    </div>
    <select>
      <option value="" disabled selected>Select feature</option>
      <option value="" disabled selected>Select category</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  </div>

  <div class="left">
    <div class="description">
      <br>
      <h2 style="color:blue">Select the feature</h2>
    </div>
    <select>
      <option value="" disabled selected>Select feature</option>
      <option value="" disabled selected>Select category</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  </div>



</body>

</html>

＆＃13;

如何在div中放置下拉列表并将它们放在一起？

6 个答案: