Question

这真让我发疯！我读过10篇有关堆栈溢出的文章，文档等，我只是知道这将是基本的东西。我不认为这是相关的，但这是针对chrome扩展程序的。

我尝试了大约十二种变体，以我在此博客文章中读过的一种为基础：https://codeburst.io/common-problems-in-positioning-elements-in-css-best-practices-b03ac54dbdcb

我可以通过对输入和按钮字段的宽度百分比进行硬编码来使其工作，但是我宁愿找到一些不太hacky的东西。

我想在同一行上呈现输入字段和两个按钮。现在，输入占据了一行的大部分，并且两个按钮在其下方呈现了内联：

PATH

Answer 1

您是否研究过使用标准的CSS框架，一种非常流行的引导程序。

这将简化您的html，并且不宜使用符合html的样式

<div class="row"><div class="form-group col-md-3"> </div>

Answer 2

使用以下方法用flexbox设置表单样式很好。

为防止溢出，请将#wrapper的宽度设置为100%，将input min-width: 0;

如果您不想在CSS中设置输入的宽度，还可以在size上使用HTML <input type="text">属性。这将以字符为单位指定宽度。例如：<input type="text" size="8">

html {
  height: 200px;
  width: 200px;
  position: relative;
}

body {
  margin: 0;
}

#header {
  text-align: center;
  
}

#wrapper {
  display: inline;
  bottom: 0;
  position: absolute;
  width: 100%;
}

.categoryForm {
  display: flex;
  align-items: center;
  width: 100%;
}

input {
  min-width: 0;
}

<html>

<head>
  <title>Please</title>
  <script src="popup.js"></script>
</head>

<body>
  <h2 id="header">Extension</h2>
  
  <div id="div1"></div>

  <div id="wrapper">
    <form class="categoryForm" autocomplete="off">
      <input type="text" id="category" />
      <button value="add" id="addButton">Add</button>
      <button value="clear" id="clearButton">Clear</button>
    </form>
  </div>

</body>

</html>

强制html输入显示带有按钮的内联

2 个答案: