Question

我正在尝试使用以下表单在屏幕上对齐输入

<form id="search-form" action="/events/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<input type="text" name="first_name" id="first_name" value="Dave" placeholder="First Name">
<input type="text" name="last_name" id="last_name" value="" placeholder="Last Name">
<input type="text" name="event" id="event" value="" placeholder="Event">
<input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png"  class="search_button">
</form>

但是，除非屏幕很小（<400像素），否则我不希望事情开始包装。否则，我希望一切都占据我的屏幕的100％，最多1000像素。所以我尝试添加这个CSS

@media (max-width: 1000px) {
  #search-form {
    -ms-flex-wrap: wrap; 
        flex-wrap: wrap;
  }

  #first_name {
    width: 50%;
    margin: 0;
  }

  #last_name {
    width: calc(50% - 1px);
    margin-left: 1px;
  } 

  #first_name, #last_name {
    margin-bottom: 1px;
  }

  #event {
    width: calc(100% - 20px);
    margin: 0;
  }
}

这是说明问题的小提琴 - https://jsfiddle.net/7h62z3tw/2/。除非屏幕很小，我如何调整以保持所有内容在同一条线上？

Answer 1

我认为这就是你要找的东西。我添加了一些额外的CSS，看起来对于媒体屏幕＆lt; 400px和普通寡妇都很好。我还在css部分中注释了我添加和更改的内容。Live ON Fiddle

  /* line 123, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#searchContainer {
  padding: 10px;
  font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  background-color: tan;
  
}


/* line 132, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#searchContainer h1 {
  margin: 5px 0;
  font-size: 1.0em;
   text-align: center;
  /*just make it for looks good*/
}

#search-form {
  display: inline-flex;
  /*In screen >400px input element will be inline*/
width: 100%;
}

/* line 137, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#first_name,
#last_name {
  width: 40%;
  /*make the width like event so all the input fields looks good*/
}

/* line 138, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#event {
  width: 100%;
}

/* Do not specify width to allow it to grow freely */


/* line 139, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#last_name,
#event {
  margin-left: 1px;
}

@media only screen and (max-width: 400px) {

  /*set the max width 400px so they will wrap after the media screen reach 400px*/

  #search-form {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  /* line 149, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

  #first_name {
    width: 100%; /*Make the this 100% on screen < 400px */
    margin: 0;
  }

  /* line 150, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

  #last_name {
    width: 100%; /*Make the this 100% on screen < 400px */
    margin: 0;
    /*remove the mergin left 1 and add this */
  }

  /* line 151, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

  #first_name,
  #last_name {
    margin-bottom: 1px;
  }

  /* line 152, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

  #event {
    width: 85%; /*Make the this 100% on screen < 400px */
    margin: 0;
  }

}

/* line 158, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#search_form {
  display: table-cell;
  padding: 0px;
}

/* line 162, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#search_form form input {
  vertical-align: middle;
}

 

<div id="searchContainer">
  <h1>Enter Search Criteria To Lookup Results:</h1>
  <form id="search-form" action="/events/search" accept-charset="UTF-8" method="get">
    <input name="utf8" type="hidden" value="✓">

    <input type="text" name="first_name" id="first_name" value="Dave" placeholder="First Name">
    <input type="text" name="last_name" id="last_name" value="" placeholder="Last Name">
    <input type="text" name="event" id="event" value="" placeholder="Event">
    <input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
  </form>
</div>

如何让我的元素占据“max-width”规范的宽度？

1 个答案: