Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >将输入表单引导到段落中

问将输入表单引导到段落中
EN

Stack Overflow用户

提问于 2017-07-17 07:55:22

回答 1查看 1.8K关注 0票数 2

我正在尝试使用Bootstrap将输入表单放入段落中。但是，它总是跳到一个新行中。

我想要的，或多或少，是这样的：

但是，我得到了这个：

我能做什么?下面是我的代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="text" class="form-inline">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
  <div class="input-group">
    <select class="form-control" id="sel1" style="width:auto;">
      <option>nope</option>
      <option selected>tempor</option>
      <option>not this one</option>
      <option>wrong</option>
    </select>
    <span class="input-group-addon" style="width:auto;">select option</span>
  </div>
  <p>...incididunt ut labore et dolore magna aliqua.</p>
  <br>
</div>

twitter-bootstrap

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

EN

回答 1

Stack Overflow用户

发布于 2017-07-17 08:06:36

将style="display: inline"添加到<p>元素，将style="display: inline-block"添加到class="input-group"。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="text" class="form-inline">
  <p style="display: inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
  <div class="input-group" style="display: inline-block">
    <select class="form-control" id="sel1" style="width:auto;">
      <option>nope</option>
      <option selected>tempor</option>
      <option>not this one</option>
      <option>wrong</option>
    </select>
    <span class="input-group-addon" style="width:auto;">select option</span>
  </div>
  <p style="display: inline">...incididunt ut labore et dolore magna aliqua.</p>
  <br>
</div>

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45138752

复制

相关文章

jquery选择器用法_jQuery属性选择器

一、基本选择器 1. ID选择器 ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素，并以iQuery包装集的形式返回给对象。使用公式:(“#id”) 示例：(“#box”) //获取id属性值为box的元素 2. 元素选择器元素选择器是根据元素名称匹配相应的元素。元素选择器指向的是DOM元素的标记名，也就是说元素选择器是根据元素的标记名选择的。使用公式：(“element”) 示例：(“div”) //获取所有div元素 3.类名选择器类选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中，一个元素可以有多个CSS类，一个CSS类又可以匹配多个元素，如果有元素中有一个匹配类的名称就可以被类选择器选取到。简单地说类名选择器就是以元素具有的CSS类名称查找匹配的元素。使用公式：(“.class”) 示例：(“.box”) //获取class属性值为box的所有元素 4.复合选择器复合选择器将多个选择器（可以是ID选择器、元素选择器或是类名选择器）组合在一起，两个选择器之间以逗号”,”分隔，只要符合其中的任何一个筛选条件就会被匹配，返回的是一个集合形式的jQuery包装集，利用jQuery索引器可以取得集合中的jQuery对象。注意：多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素，而是将每个匹配的元素合并后一起返回。使用公式：(“selector1,selector2,……,selectorN”) selector1:一个有效的选择器，可以是ID选择器、元素选择器或类名选择器等 selector2:另一个有效的选择器，可以是ID选择器、元素选择器或类名选择器等 selectorN:（可选择）任意多个选择器，可以是ID选择器、元素选择器或类名选择器等示例：(“div,#btn”) //要查询文档中的全部的<div>元素和id属性为btn的元素 5.通配符选择器

全栈程序员站长

2022/11/16

12.2K0

jQuery 选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。

星辰_大海

2020/10/09

2.8K0

jQuery选择器

说明: 可以使用length属性来判断标签是否选择成功, 如果length大于0表示选择成功，否则选择失败。

落雨

2022/03/01

30.4K0

jQuery 选择器

jquery html xml

基本选择器基本选择器是最简单的选择器，可以通过元素id、class和标签名等来直接查找DOM元素。元素选择器根据给定元素名匹配元素。如下选择的是所有div元素。 $("div").css("

静默虚空

2018/01/05

7.4K0

JQuery选择器

jquery javascript 网站 http

jQuery常用的事件： load：当文档加载时运行脚本 blur：当窗口失去焦点时运行脚本 focus：当窗口获得焦点时运行脚本 change：当元素改变时运行脚本 submit：当提交表单时运行脚本 keydown：当按下按键时运行脚本 keypress：当按下并松开按键时运行脚本 keyup：当松开按键时运行脚本 click：当单击鼠标时运行脚本 dblclick：当双击鼠标时运行脚本 mousedown：当按下鼠标按钮时运行脚本 mousemove：当鼠标指针移动时运行脚本 mouseout：当鼠标指针移出元素时运行脚本 mouseover：当鼠标指针移至元素之上时运行脚本 mouseup：当松开鼠标按钮时运行脚本 abort：当发生中止事件时运行脚本

我不是费圆

2020/09/21

7.4K0

JQuery选择器

1 $("*") ---------选取所有元素 2 $(this) --------选择当前HTML元素 3 $("p.a") -----选取p元素下class为a的元素 4 $("p:first") ----选取第一个p元素 5 $("ul li:first-child") ----选取ul下第一个li元素 6 $("tr:even") -------选取偶数位置下的tr 7 $("tr :odd") --------选取奇数位置的tr

用户3159471

2018/09/13

1.7K0

jquery 选择器

image input png script title

<script type="text/javascript"> $(".demo").click(function(){ alert() }) </script>

用户5760343

2019/10/08

1.5K0

[jQuery笔记] jQuery选择器

jquery html css

jquery选择器允许对html中的元素组合单个元素进行操作，jquery的选择器和css的选择器几乎大同小异，大致分为元素选择器、id选择器和类选择器。jquery的选择器基于元素的id、类、类型、属性、属性值等查找或选择html元素，基于已经存在的css选择器，另外，jquery也支持自定义选择器。

行者

2019/12/05

1.8K0

jQuery（选择器）

display hidden input reset submit

注意：但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)；

全栈开发日记

2022/05/12

1.5K0

jQuery 选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。

清出于兰

2020/10/26

1.8K0

jquery选择器

jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

Devops海洋的渔夫

2019/05/30

1.8K0

jQuery 选择器

jquery ajax html

jQuery网页脚本语言核心之一概述： 1. 选择器是jQuery的基础 2. 对事件处理，遍历DOM和Ajax操作都依赖于选择器 3. 可简化代码什么是jQuery选择器？层叠样式表良好地继承了css选择器语法，还继承了其获取页面元素便捷高效的特点于css不同，jQuery选择器获取元素后，为该元素添加的是行为有良好的兼容性优势 1. 简洁的写法 (1) $(选择) 2. 完善的处理机制 (1) 简洁，避免某些错误类型：可通过css选择器和过滤选择器两种方式选择元素，每种又有不同的方法来

房上的猫

2018/04/18

2.7K0

Jquery选择器

1、基本选择器选择器描述结果示例 #id 根据id获取元素单个 $(“#myid”)选取id的值为myid的元素 .class 根据class获取元素集合 $(“.myclass”)选取class的值为myclass的元素 a,p,img等html标签根据指定的html标签获取元素集合 $(“img”)选取所有的img标签 * 获取所有的元素集合 $(“*”)获取所有标签元素 a,.myclass,#id等获取对应标签元素集合 $(“a,.myclass,

苦咖啡

2018/05/07

2K0

jquery 编程算法 html

jQuery选择器 <script src="https://code.jquery.com/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script> <body> <ul> <li>1</li> <li class="a">2</li> <li>3</li> <li class="b">4</li> <li>5</li> <li class="c">6</li> <li>7</li

ymktchic

2022/01/18

1.8K0

JQuery选择器(上)

HTML5学堂：jQuery的选择器可以让我们很方便的操作获取元素，那么本文介绍的是jQuery选择器的几种选择器，希望对大家有帮助！谢谢！ 1.基本选择器(3种): $("标签名"),如$("p")是选取了所有的p标签节点 $("#id名"),如$("#test")是选取了id为test的标签节点 $(".class名"),如$(".test")是选取了所有class为test的标签节点上面的$("标签名")和$(".class名")返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,如eq,gt

HTML5学堂

2018/03/12

1.1K0

jQuery 过滤选择器

名称用法描述 :eq（index） $(“li:eq(2)”).css(“color”, ”red”); 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 :odd $(“li:odd”).css(“color”, ”red”); 获取到的li元素中，选择索引号为奇数的元素 :even $(“li:even”).css(“color”, ”red”); 获取到的li元素中，选择索引号为偶数的元素案例： <!DOCTYPE html> <html lang="zh-CN"> <he

兮动人

2021/06/11

6940

jQuery选择器（20171026）

一.jq与js再比较看优势看案例（好友列表）结构： <div id="con" class="center"> <ul id="friendslist"> <li> <p class="border_bottom">我的好友</p> <ul> <li>张三</li> <li>李四</li> <li>王五</li>

天天_哥

2018/09/29

9250

jQuery选择器总结

本文主要介绍了jQuery选择器的使用，包括基本选择器、层次选择器、过滤选择器、内容过滤器、可见选择器、属性选择器和子元素选择器等。通过实例讲解了如何在JavaScript中使用这些选择器，以及如何使用表单元素过滤选择器。

IMWeb前端团队

2018/01/08

1.2K0

jQuery层次选择器

jQuery是一种流行的JavaScript库，用于简化HTML文档的操作和动态交互。在jQuery中，层次选择器是一种非常有用的选择器，可以根据元素之间的层次关系选择特定的元素。

堕落飞鸟

2023/05/18

4500

jquery 层级选择器

关于层级选择器。 $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素。 parent :任何有效的选择器。 child: 用来筛选子元素的选择器 $(function(){ $("ul.myul > li").css("border","2px solid red"); //将ul带有.myul选择下面的li 标签添加边框。}); $("ancestor descendant") 选择给定的祖先元素的所有后代

用户1197315

2018/01/19

9040

相似问题

将facebook访问令牌从移动客户端传递到服务器和进程

12

将Google访问令牌从客户端传递到服务器

16

OAuth2身份验证服务器访问令牌从JWT令牌到OAuth令牌

13

将OAuth令牌从设备传递到服务器:糟糕的形式？

11

将OAuth访问令牌传递给客户端可以吗？

10

活动推荐

国内短信福利大放送，不要错过！

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例