html - 如何在文档的最大宽度中输入输入？

Question

我正在尝试使用输入和文本创建一个表单行，我试图将输入适合文档的最大宽度，但这不起作用

有什么解决方案吗？以及如何对这个表单使用媒体查询？谢谢你

.comment {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  flex-wrap: wrap;
  flex-direction: row;
  border: 1px solid #efefef;
}

.com-row {
  width: 100%;
  min-height: 50px;
  flex-wrap: wrap;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.txt {
  width: 550px;
  min-height: 50px;
  margin: 0 5px;
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  border: none;
}

<div class="comment">
   <div class="com-row">
      <input type="text" class="txt">
      <h4>Post</h4> 
   </div>
</div>

标签： htmlcss

Answer 1

看起来输入正在离开屏幕，因为您已将输入宽度设置为 550 像素，因此当您使用移动设备时，宽度会更小。您很可能会使用百分比或使用媒体查询

.txt {
    width: 50%;
}