Question

我有以下按钮和输入，我无法弄清楚如何进入同一条线。

enter image description here

我用红色突出显示了div。这是控制它的HTML anbd CSS：

<div class="input_container">
      <input name="resolutionComments[]" id="country_id" type="text" placeholder="Enter a Part Number" onkeyup="autocomplete()">    
        <ul id="country_list_id"></ul>
        <button class="btn2 btn2-warning" id="b3">HELP</button>
    </div>


.input_container {
  display: block;
  width:49%;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-color: red;
  border-size: 2px;
}

.input_container input {        
  display: inline;
  margin: 0 20%;
  position: relative;
  height: 42px;
  width: 290px;
}

.btn2 {
  display: inline-block;
  margin-bottom: 0;
  line-height: 1.42857143;
}

.input_container ul {
  display: inline-block;
  padding-left: 40px;
  width:49%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #eaeaea;
  z-index: 1;
  background: #f3f3f3;
  list-style: none;
}

我尝试使用display: inline和display: inline-block混合使用这些不同的元素，但无论我如何剪切它，这些HELP按钮和INPUT框永远不会在同一条线上。我做错了什么？

Answer 1

只需更改输入位置。

示例：

<div class="input_container">
  <input name="resolutionComments[]" id="country_id" type="text" placeholder="Enter a Part Number" onkeyup="autocomplete()">    <button class="btn2 btn2-warning" id="b3">HELP</button>
    <ul id="country_list_id"></ul>

</div>

Answer 2

您的ul元素太宽（宽度：49％）。即使作为内联块，如果它不适合当前行，也会导致换行。

Answer 3

为什么？他们没有对齐的原因是因为没有足够的空间让所有元素都适合一行。

修复了解您的某些CSS正在做什么。您的搜索表单的容器具有以下CSS：

.input_container {
     display: block;
     width: 49%;
     margin-left: auto;
     margin-right: auto;
     border-style: solid;
     border-color: red;
     border-size: 2px;
}

有很多问题。

不需要display: block;，因为这是DIV默认显示的方式。
width: 49%;将占其父元素的49％。即49％的父宽度为1000px = 490px，49％的父宽度为500px = 245px
border-size应为border-width

现在进入INPUT样式：

.input_container input {        
     display: inline;
     margin: 0 20%;
     position: relative;
     height: 42px;
     width: 290px;
}

不需要display: inline因为默认情况下INPUT的显示方式。
据我所知，不需要position: relative。
margin: 0 20%会在INPUT的左侧和右侧添加一个边距为其父元素的20％。如果父级是1000px，那么您在输入的每一侧都添加200px的边距！如果父元素为1000px，则此元素将占用690px（200px + 290px + 200px）。

现在进入你的UL风格：

.input_container ul {
     display: inline-block;
     padding-left: 40px;
     width: 49%;
     margin-left: auto;
     margin-right: auto;
     border: 1px solid #eaeaea;
     z-index: 1;
     background: #f3f3f3;
     list-style: none;
}

您再次使用百分比宽度，因此它将基于它的父元素.input_container。如果.input_container是1000px父元素的49％，那么.input_container的宽度为490px，而您的UL将是其宽度为490px = ~240px的49％。

一旦你摆脱了一些这些百分比值，尤其是margin: 0 20%，虽然还有一些工作要做，但事情会有所改善。

INPUT和BUTTON元素都是内联的，因此它们会相互排列。将UL放在它们之后。

这是一个jsFiddle，略微修改了HTML和CSS：http://jsfiddle.net/y475jx8b/2/

我留下了一些百分比宽度，因为这是一个旨在让您走上正确轨道的演示。根据最终要求，您最好不要提供具体的服务。

.input_container {
     width: 49%;
     margin: 0 auto;
     border: 2px solid red;
}
.input_container input { 
     height: 42px;
     width: 290px;
}
.btn2 {
     margin-bottom: 0;
     line-height: 1.42857143;
}
.input_container ul {
     width: 49%;
     margin: 0 auto;
     border: 1px solid #eaeaea;
     z-index: 1;
     background: #f3f3f3;
     list-style: none;
}

<div class="input_container">
     <input name="resolutionComments[]" id="country_id" type="text" placeholder="Enter a Part Number" onkeyup="autocomplete()"> 
     <button class="btn2 btn2-warning" id="b3">HELP</button>   
     <ul id="country_list_id"></ul>
</div>

注意之前我使用过 jQuery Autocomplete ，我不确定您是否必须在标记中提供UL。我相信它会为你创造一个。

编辑1 - 在评论中回复OP的问题 - 如何使DIV居中？

通常是使用边距auto以及指定包含元素宽度的最简单方法。以下是最常见的内容：

width: 500px; /* can be some other unit like a percentage */
margin: 0 auto;

上面我使用的是shorthand version，所以我不必单独提供每一方。 0设置了上边距和下边距，auto设置了左边距和右边距。 0不需要将元素居中。您可以执行以下操作，它仍然有效，margin: 25px auto;或margin: 100px auto 25px。

使用保证金的auto值时，您必须为该元素提供宽度，以使其居中。这是因为浏览器会为您计算您的保证金，但如果它不知道该元素想要占用多少空间，则无法执行此操作。例如，如果包含元素（这可能是可能或可能不是基于浏览器窗口视口宽度的父元素）是1000px而您的元素是500px宽，那么它将按如下方式计算：

（包含元素） - （元素宽度）=（留出边距的空间）/ 2 =（每边的边距宽度）

所以：

1000px - 500px = 500px / 2 =每侧250px

如果没有指定的宽度，它将如下所示：

1000px - ？ =？ / 2 =？每边的保证金

百分比宽度很好 - 让我们说width: 30%所以30％的父宽度为1000px = 300px。这将计算如下：

1000px - 300px = 700px / 2 =每侧边距350px

现在，百分比宽度的捕获量是，如果您的包含元素是300px宽，那么90％的90％的可能太小。请参阅下文，了解如何处理此事。

现在只需插入一个不同于1000px的包含元素宽度，就可以了解不同浏览器大小的可变宽度空间。

1500px - 500px = 1000px / 2 =每侧边距为500px

750px - 500px = 250px / 2 = 12px，每边保证金

现在，如果您的元素恰好具有设置宽度（如INPUT和BUTTON元素），并且它们总数超过浏览器宽度，那么它们将创建一个水平滚动条。这是您希望使用百分比宽度和（可能）与max-width property结合使用的位置，因此元素不会太大。如果它太小，你也可以使用min-width property。

这是一个jsFiddle演示如何执行此操作：http://jsfiddle.net/9gyq89ye/2/

Answer 4

如果要在正常流程中将两个元素对齐，则不应在它们之间添加其他元素。

此外，您为输入设置了静态宽度：290px，当容器较小时将按下按钮，最好在%中指定宽度，也可以与a min-width（容器以及）。

此外，margin: 0 20%;太多了，它将占据容器宽度的40%。

.input_container {
  display: block; /*..... ? default ....... */
  width: 49%;
  margin: 0 auto;
  border: 2px solid red;
}
.input_container input {
  position: relative;
  display: inline;
  width: 80%;
  height: 42px;
}
.btn2 {
  display: inline-block;
  line-height: 1.42857143; /*..... ? ....... */
  margin-bottom: 0;
}
.input_container ul {
  display: inline-block;
  width: 49%;
  margin: 0 auto;
  padding-left: 40px;
  z-index: 1; /*..... ? ....... */
  border: 1px solid #eaeaea;
  background: #f3f3f3;
  list-style: none;
}

<div class="input_container">
  <input name="resolutionComments[]" id="country_id" type="text" placeholder="Enter a Part Number" onkeyup="autocomplete()">
  <button class="btn2 btn2-warning" id="b3">HELP</button>
  <ul id="country_list_id"></ul>
</div>

作为旁注，z-index对正常流程中的元素没有任何影响。此外，您应为0以外的值指定单位。

是什么导致这两个元素在不同的行上显示？

4 个答案: