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

I have the following button and input that I cannot figure out how to get on the same line.

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

I've highlighted the div in red. Here is the HTML anbd CSS that's controlling this:

我用红色突出了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;
}

I've tried using a mix of display: inline and display: inline-block for these various elements but no matter how I cut it I these the HELP button and the INPUT box are never on the same line. What am I doing wrong?

我尝试过使用混合显示:内联和显示:内联块用于这些不同的元素,但无论我如何剪切它,这些HELP按钮和INPUT框永远不会在同一条线上。我究竟做错了什么?

4 个解决方案

#1

Why? The reason they do not line up is because there is not enough room for all the elements to fit on one line.

为什么?他们没有排队的原因是因为没有足够的空间让所有元素都适合一条线。

Fix Understand what some of your CSS is doing. Your search form's container has the following CSS:

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

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

which has a number of issues.

这有很多问题。

• No need for display: block; as that's how a DIV displays by default.

无需显示:块;就像DIV默认显示的那样。

• width: 49%; will be 49% of it's parent element. i.e. 49% of parent width of 1000px = 490px, 49% of parent width of 500px = 245px

宽度:49%;将是它的父元素的49%。即49%的父宽度为1000px = 490px,49%的母宽度为500px = 245px

• border-size should be border-width

border-size应该是border-width

Now onto your INPUT styles:

现在进入您的INPUT样式:

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

• No need for display: inline as that's how a INPUT displays by default.

无需显示:内联,因为默认情况下INPUT的显示方式。

• No need for position: relative as far as I can see.

根据我的意见,不需要职位:亲戚。

• margin: 0 20% will add a margin to the left and right side of your INPUT of 20% of it's parent element. If parent is 1000px then you're adding 200px of margin on each side of your input! This element alone would take up 690px ( 200px + 290px + 200px ) if the parent element was 1000px.

margin:0 20%将在INPUT的左侧和右侧添加20%其父元素的边距。如果父级是1000px,那么您在输入的每一侧添加200px的边距!如果父元素为1000px,则仅此元素将占用690px(200px + 290px + 200px)。

Now onto your UL styles:

现在进入你的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;
}

• Again you're using a percentage width so it will be based off of it's parent element, .input_container. If .input_container is 49% of 1000px parent element then .input_containerhas a 490px width and your UL will be 49% of it's parent width of 490px = ~240px.

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

Once you get rid of some of those percentage values, especially margin: 0 20% things will clear up a bit though there is a little more work to do.

一旦你摆脱了一些百分比值,特别是保证金:0 20%的东西会稍微清理一下虽然还有一些工作要做。

Both your INPUT and BUTTON elements are inline and therefore will line up next to one another. Place the UL after them both.

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

Here is a jsFiddle with slightly modified HTML and CSS: http://jsfiddle.net/y475jx8b/2/

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

I left in some of your percentage widths as this is a demo intended to get you on the right track. You might be better off supplying a specific with depending on the final requirements.

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

.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>

NOTE I've used jQuery Autocomplete before and I'm not sure you have to supply a UL in the markup. I believe it creates one for you.

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

EDIT 1 - Reply to OP's question in comments - How to center DIV?

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

Typically the easiest way to use margin auto along with specifying a width for the containing element. Below is what is most common:

通常是使用margin auto的最简单方法,同时指定包含元素的宽度。以下是最常见的:

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

Above I'm using a shorthand version so I don't have to supply each side separately. 0 is setting the top and bottom margins and auto is setting the left and right margins. 0 is not required to center the element. You could do the following and it would still work, margin: 25px auto; or margin: 100px auto 25px.

上面我使用的是速记版本,所以我不必单独提供每一面。 0设置顶部和底部边距,auto设置左右边距。不需要0来使元素居中。您可以执行以下操作,它仍然有效,保证金:25px auto;或保证金:100px auto 25px。

When using the auto value for margin you must supply a width for that same element in order for it to center. This is because the browser will calculate your margin for you but it cannot do this if it does not know how much space the element wants to take up. For example, if the containing element (this could be a parent element that may or may not be based on the viewport width of your browser window) is 1000px and your element is 500px wide then it will calculate as follows:

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

(containing element) - (element width) = (space left for margins) / 2 = (margin width for each side)

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

so:

1000px - 500px = 500px / 2 = 250px for each side

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

Without a specified width it would look like this:

如果没有指定的宽度,它将如下所示:

1000px - ? = ? / 2 = ? for margin on each side

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

Percentage widths are fine - let's say width: 30% so 30% of a parent width of 1000px = 300px. That would calculate as follows:

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

1000px - 300px = 700px / 2 = 350px for margin on each side

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

Now the catch with a percentage width is that if your containing element is 300px wide then 30% of that which is 90px might be too small. See below on how to handle this.

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

Now just plug-in a containing element width other than 1000px to get an idea of a variable width space like different browser sizes.

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

1500px - 500px = 1000px / 2 = 500px for margin on each side

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

750px - 500px = 250px / 2 = 12px for margin on each side

每侧750px - 500px = 250px / 2 = 12px的边距

Now if your elements happen to have set widths, like the INPUT and BUTTON elements, and they total more than the browser width then they will create a horizontal scroll bar. This is where you would want to use a percentage width and (possibly) in conjunction with the max-width property so the element doesn't get too large. If it get's too small you could also use the min-width property as well.

现在,如果你的元素碰巧有设置宽度,比如INPUT和BUTTON元素,并且它们总数超过浏览器宽度,那么它们将创建一个水平滚动条。这是您希望使用百分比宽度和(可能)与max-width属性一起使用的位置,因此元素不会太大。如果它太小,你也可以使用min-width属性。

Here is a jsFiddle demonstrating how to do this: http://jsfiddle.net/9gyq89ye/2/

这是一个jsFiddle演示如何做到这一点:http://jsfiddle.net/9gyq89ye/2/

#2

Just change the input position.

只需更改输入位置即可。

Example:

<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>

#3

Your ul element is too wide (width: 49%). Even as inline-block, it will cause a line break if it wont fit on the current line.

你的ul元素太宽(宽度:49%)。即使作为内联块,如果它不适合当前行,它将导致换行。

#4

If you want to align two elements next to each other in normal flow you should not be adding other elements in between them.

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

Also, you've set a static width: 290px for the input which will push the button down when the container is small, it is better to specify the width in %, maybe combined with a min-width (For the container as well).

此外,您设置了一个静态宽度:输入为290px,当容器较小时将按下按钮,最好以%为单位指定宽度,也可以与最小宽度相结合(对于容器也是如此) 。

Also, margin: 0 20%; is just too much, it'll take 40% of the width of container.

另外,保证金: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>

As a side note, z-index doesn't have any effect on elements in normal flow. Also, you should specify a unit for values other than 0.

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