Fatal编程技术网
  • javascript/
  • Javascript 我如何让我的按钮内联（旁边）输入？

Javascript 我如何让我的按钮内联（旁边）输入？

javascript css twitter-bootstrap

Javascript 我如何让我的按钮内联（旁边）输入？,javascript,css,twitter-bootstrap,Javascript,Css,Twitter Bootstrap,我的标题中的按钮正在做一件非常烦人的事情，它掉到了输入表单下面。我在网上搜索过，看到了人们对类似问题给出的不同答案，但没有一个对我有用。下面是问题的图像。有人能找出我遗漏了什么吗 。搜索表单{ 显示：内联块； 浮动：对； } button.btn.btn-secondary{ 显示：内联块； } #产品搜索{ 填充0； 显示：内联块； } 看我的小提琴 <form role="search" method="get" class="search-form" action="">

我的标题中的按钮正在做一件非常烦人的事情，它掉到了输入表单下面。我在网上搜索过，看到了人们对类似问题给出的不同答案，但没有一个对我有用。下面是问题的图像。有人能找出我遗漏了什么吗

。搜索表单{
显示：内联块；
浮动：对；
}
button.btn.btn-secondary{
显示：内联块；
}
#产品搜索{
填充0；
显示：内联块；
}
看我的小提琴

<form role="search" method="get" class="search-form" action="">
  <input class="btn btn-secondary no-border " id="product-search-btn" type="submit" class="search-submit" />
  <input type='textbox' name="s" class="form-control form-inline" id="item-search" value="" placeholder="Enter your postcode.." />
</form>

您需要设置文本输入的宽度，以使按钮在其旁边浮动

您也可以使用引导网格系统，请参阅文档：）

----------编辑---------------

好的，如评论中所述，有很多不一致之处

我更新了小提琴，试图把事情弄清楚

我仍然没有使用引导网格系统，以避免混淆

这个问题只是宽度的问题

让我知道你的想法

.search-form {
    display: flex;
    float: right;
}
尝试用上述属性替换您的搜索表单类。

您应该尝试使用css列：

在css文件中添加：

    * {box-sizing: border-box;}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}



[class*="col-"] {
    float: left;
    padding: 5px;
}
然后在html中将“col-[size]”类属性添加到标记中。容器标记的类中应包含“col-12”，以指定其占用整个宽度。容器内的标签应带有“col-8”和“col-4”，例如：

    <!DOCTYPE html>
<html>
<head>
    <meta charset=\'utf-8\'/>
    <title>test</title> 

    <link rel='stylesheet' href='index.css'/>
</head>
<body>
    <h1>test</h1>
    <form role="search" method="get" class="search-form col-12">
  <input type='textbox' name="s" class="form-control form-inline col-8" id="item-search" placeholder="Enter your postcode.." />
  <input class="btn btn-secondary no-border col-4" id="product-search-btn" type="submit" class="search-submit" />
</form>
</body> 


试验
测试
Mix float+inline block没有意义。@Epodax你现在高兴吗？希望这不会对你的一天有太大影响。@MarcosPérezGude我在寻求帮助，而不是批评。谢谢。你一定在什么地方有其他的css，我开始拉小提琴，他们并排在一起，这是一个帮助。如果将该语句视为构造性语句，则不会再混合使用浮点+内联块，因为浮点会覆盖该值。然而，您正在使用引导，它有一个网格系统来避免您的问题。只需在表格的两栏中填写，就可以了。你是上帝派来的！非常感谢，效果很好。至少在firefox中不起作用。但是，您正在混合浮点和内联块。。。。。。我坚持认为这毫无意义。@MarcosPérezGude检查一下我更新的小提琴，它现在可以完美地工作了！：） 
    <!DOCTYPE html>
<html>
<head>
    <meta charset=\'utf-8\'/>
    <title>test</title> 

    <link rel='stylesheet' href='index.css'/>
</head>
<body>
    <h1>test</h1>
    <form role="search" method="get" class="search-form col-12">
  <input type='textbox' name="s" class="form-control form-inline col-8" id="item-search" placeholder="Enter your postcode.." />
  <input class="btn btn-secondary no-border col-4" id="product-search-btn" type="submit" class="search-submit" />
</form>
</body>