html如何把文字和div弄到同一行显示？

Posted 2023-05-06

如图，我写了一个大div，里面嵌套了小div，但是文字换行了，怎么把它们显示成一行呢？就是 “已装卷数：xx” 这个格式

参考技术A 方法1：将ID为infoOutput里面的<div>设置行内样式。<div>本身是一个块元素，本来就占据一行，此时应将<div>设为行内元素即可。
#infoOutput div display: inline-block;
方法2：建议将ID为infoOutput里面的<div>改为更为语义化的<span>元素。 参考技术B 使用浮动就可以显示在一行上 参考技术C 把字体改小不会破坏结构 如果需要这么大的字 就在显示文字的div CSS样式加上 white-space: nowrap（强制一行显示） 参考技术D 亲，你这个92的数字没有被包含在你的DIV里面， 第5个回答  2021-02-28 给id为loadedGoodsNum添加样式为：
display: inline-block;

如何修改Bootstrap中的HTML代码，是文字与输入框在同一行

怎么把文字和输入框弄到同一行

12    <marquee style="z-index:0;position:absolute;">内容</marquee><div style="z-index:2;position:absolute;">内容</div>    
第一行是滚动文字
第二行是普通的不动的文字
望采纳！

参考技术A 扩大整体宽度，或者缩小input宽度；文字样式float:left input样式float:right
希望对你有帮助望采纳，谢谢！ 参考技术B 看一下label和input的css，是否有width:100%类似这种限定了长度，导致文本框直接被挤到下一行了 参考技术C <form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
</form>

参考技术D 1、你这个图片太小了。根本看不清代码。
2、正好我也在用bootstrap这个表单样式。
3、一行，也就是一个label里面有两个东西，一个是span标签，就是文字这块。一个是input标签也就是一个控件。这两个家伙加在一起的宽度不能超过100%。而且文字这块也不能超过本身百分比要不撑格之后会造成你这种现象。

.basic-grey label>span
float: left;
font-weight: 500;
font-size: 14px;
width: 30%; //就是这里。最好30%或者以上。你可以先设定个50%。然后慢慢调整。
text-align: right;
padding-right: 10px;
margin-top: 10px;
color: black;

下面是type为text的控件。其width我设置60%。这样会有一些留白。比较好看。
.basic-grey input[type="text"]

border: 1px solid #CFCFCF;
color: #4F4F4F;
height: 30px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 3px 3px 3px 5px;
width: 60%; //就是这里。
font-size: 14px;
line-height:15px;
box-shadow: inset 0px 1px 4px #ECECEC;
-moz-box-shadow: inset 0px 1px 4px #ECECEC;
-webkit-box-shadow: inset 0px 1px 4px #ECECEC;