0

我的目标是制作适应浏览器窗口大小的文本框。我正在使用 cssflex属性。下面代码中的文本框不适应屏幕大小，我不确定为什么。我相信这可能是因为我有一个与实际文本框的 css 属性交互的外部 div。

我不知道该怎么做的另一件事是将按钮与文本框的右边缘对齐，这样按钮就不会越过文本框。因为文本框没有动态改变它们的宽度，所以我不确定如何继续使用按钮。

.search_btn {
  width: 150px;
  padding: 10px;
  background-color: black;
  color: white;
  border: 0;
}

.search_btn:hover {
  box-shadow: 1px 1px 1px grey;
  /*background-color: darkblue;*/
}

input {
  justify-content: flex-left;
  padding: 5px;
  position: absolute;
  margin-left: 200px;
}

.txt_box {
  display: flex;
  width: 80%;
}

.search_section {
  /*padding: 5px;*/
  padding-top: 10px;
  padding-bottom: 10px;
}

.search_options {
  padding-bottom: 10px;
}

.row {
  display: flex;
  flex-direction: row;
  align-items: left;
  justify-content: left;
  padding-top: 10px;
  padding-bottom: 10px;
}
<form action="/action_page.php">
  <div class="search_section">
    <div class="search_options">
      <h3 class="tit_label" for="fname">SHAPES</h3>

      <div class="row">
        <label class="left_label" for="fname">average square:</label>

        <!-- <div id="wrapper" -->
        <input class="txt_box" type="text" id="fname" name="fname" />
      </div>

      <div class="row">
        <label class="left_label" for="lname">average circle:</label>
        <input class="txt_box" type="text" id="lname" name="lname" />
      </div>
    </div>
    <div class="form-buttons">
      <input class="search_btn" type="submit" value="calculate" />
    </div>
  </div>
</form>

4

1 回答 1

1

您需要从中删除position: absolute才能input制作flex-item。既然你做了绝对定位，那么它就脱离了正常的流程，那么你就不需要使用display: flexon 了input。

不需要使用下面的样式，因为txt_box它将是一个弹性项目，然后它会相应地调整它的宽度

.txt_box {   // Not Required
  display: flex;
  width: 80%;
}

没有这样的属性justify-content: flex-left;。justify-content: flex-start;反而有

.search_btn {
  width: 150px;
  padding: 10px;
  background-color: black;
  color: white;
  border: 0;
}

.search_btn:hover {
  box-shadow: 1px 1px 1px grey;
}

input {
  padding: 5px;
}

.search_section {
  padding-top: 10px;
  padding-bottom: 10px;
}

.search_options {
  padding-bottom: 10px;
}

.row {
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
}

.left_label {
  flex-basis: 20%;
}

.txt_box {
  margin: 0;
  flex-basis: 80%;
}
<form action="/action_page.php">
  <div class="search_section">
    <div class="search_options">
      <h3 class="tit_label" for="fname">SHAPES</h3>

      <div class="row">
        <label class="left_label" for="fname">average square:</label>
        <input class="txt_box" type="text" id="fname" name="fname" />
      </div>

      <div class="row">
        <label class="left_label" for="lname">average circle:</label>
        <input class="txt_box" type="text" id="lname" name="lname" />
      </div>
    </div>
    <div class="form-buttons">
      <input class="search_btn" type="submit" value="calculate" />
    </div>
  </div>
</form>

于 2021-05-15T02:42:46.507 回答