Question

在全窗口中打开并调整窗口的大小，输入字段没有响应，因此按钮移到了输入下方，这不是我想要的。

.coupon {
  width: 100%;
  max-width: 500px;
  outline: none;
  margin: 0;
  box-sizing: border-box;
  height: 22px;
}
.coupon-btn {
  background: #21b85b;
  border: 0;
  padding: 7px 20px 7px 20px;
  text-transform: uppercase;
  color: #fff;
  display: inline;
    font-size:0.875;
  max-width: 100%;
}

<input type="text" class="coupon input-res">
<button class="coupon-btn">Apply</button>

Answer 1

尝试这样

public async Task<IActionResult> GetPeople()
{
    using( MyDbContext db = new MyDbContext( GetConnectionString() ) )
    {
        List<Person> list = await db.People
            .Where( p => p.Name == "John Smith" )
            .ToListAsync();

        // WebAPI:
        return this.Ok( list ); // returning an evaluated list, loaded into memory. (Make sure Lazy Navigation Properties are disabled too)

        // MVC:
        PeopleListViewModel vm = new PeopleListViewModel(); // in MVC always use a custom class for root view-models so you're not accepting nor returning Entity Framework entity types directly
        vm.List = list;

        return this.View( vm );
    }
}

.flex-col {
  display: flex;
  display: -webkit-flex;
}

.coupon {
  width: 100%;
  max-width: 500px;
  outline: none;
  margin: 0;
  box-sizing: border-box;
  height: 30px;
}

.coupon-btn {
  background: #21b85b;
  border: 0;
  padding: 7px 20px 7px 20px;
  text-transform: uppercase;
  color: #fff;
  display: inline;
  font-size: 0.875;
  max-width: 100%;
}

Answer 2

尝试width: calc(100% - 86px);。

.coupon {
  width: calc(100% - 86px);
  outline: none;
  margin: 0;
  box-sizing: border-box;
  height: 22px;
}
.coupon-btn {
  background: #21b85b;
  border: 0;
  padding: 7px 20px 7px 20px;
  text-transform: uppercase;
  color: #fff;
  display: inline;
    font-size:0.875;
}

<input type="text" class="coupon input-res">
<button class="coupon-btn">Apply</button>

Answer 3

尝试添加一些媒体查询

total = 0
for itervar in [3, 41, 12, 9, 74, 15]:
    total = total + itervar
print 'Total: ', total

Answer 4

您必须学习@media内容https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

否则，请使用Bootstrap https://www.w3schools.com/bootstrap4/

简单的方法是使用引导程序。

Answer 5

* {
  margin: 0; 
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 80% 20%;
  justify-content: center;
  align-items: center;
}

.coupon {
  width: 100%;
  outline: none;
  margin: 0;
  box-sizing: border-box;
  padding: 8px 0;
}

.coupon-btn {
  background: #21b85b;
  border: 0;
  padding: 10px 20px 10px 20px;
  text-transform: uppercase;
  color: #fff;
  display: inline;
    font-size:0.875;
  max-width: 100%;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <input type="text" class="coupon input-res">
  <button class="coupon-btn">Apply</button>
</div>
</body>
</html>

将元素包装到.container中并使用display: grid

您可以根据需要在容器上赋予列宽！我已经使用百分比，而是可以使用像素。

作为参考，请通过此链接https://www.w3schools.com/css/css_grid.asp

希望它会解决您的问题

如何使此输入文本字段具有响应性

5 个答案: