如何制作那些白色按钮框？答案

【问题标题】：how to make those white button boxes?如何制作那些白色按钮框？
【发布时间】：2023-01-19 00:27:03
【问题描述】：

我想以某种方式制作这些框并在其中使用按钮，但我无法这样做请帮助我这样做。

我尝试使用不透明度，但它清除了按钮输入，这不是我想要的！

【问题讨论】：

向我们展示您的 HTML + CSS，以便我们提供帮助
这些框看起来像是输入或文本区域 HTML 元素。您是否尝试过使用它们，请向我们展示您的代码。

标签： html css forms

【解决方案1】：

Bootstrap 是一个 CSS 框架，可用于轻松编写表单和其他布局代码

https://getbootstrap.com/docs/4.0/components/forms/

还有其他线框，例如 Bulma，但我发现 Bootstrap 最容易使用

【讨论】：

我想你不明白我的问题我也张贴了图片。我想制作与图像相同的表格，但我无法制作白框。

【解决方案2】：

我觉得那些白框有透明的背景颜色和透明的边框颜色。因此，这些框的 CSS 将遵循以下原则：

background-color:rgba(255,255,255,0.2);
border:2px solid rgba(255,255,255,0.6);

【讨论】：

【解决方案3】：

我不确定我是否理解你的问题，你想要白色输入框中的按钮吗？输入中不可能有按钮。

要创建那些白色输入框，您需要使用 <input type="text"> 进行小文本输入并创建较大的输入，例如地址你想使用 CSS 来调整输入框的大小。

当然，要将这些输入框设置为白色和弯曲的边缘，您需要在输入标签。例如，所述 CSS 类需要具有 color:white; 和 border-radius:5%; 才能添加样式。

要在输入框中创建默认文本，您可以在<input> 标签中使用标签助手value="Enter your adress here..."。

要在您应该使用的那些绿色框中获取每个输入标签和输入框弹性盒子.这是一个简单的框架，在这里阅读更多https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 这些绿框每个都可以是一个<div>标签，其中包含标签和输入标签，所有绿框一起应该包含在一个<div>标签中。每个绿框的单独 <div> 标签可以共享一个类，该类使用 flex-direction:row; 之类的弹性框属性为它们设置样式，使标签和输入水平相邻。最后，<div> 标签包含所有这些较小的标签，可以使用 flexbox 属性 flex-direction:column; 设置样式，以使绿色框垂直显示。

要添加 flexbox，请将 CSS 属性 display:flex; 添加到您的整体 <div> 标签中，包括所有绿框/<div>s 以及代表各个绿框的各个 <div> 标签。

希望这可以帮助。

【讨论】：