怎么能让两个DIV标签在同一行
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么能让两个DIV标签在同一行相关的知识，希望对你有一定的参考价值。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Aoaoxiong</title>
<style type="text/css">
#souall
BORDER: #ccc 1px solid; ;BACKGROUND: white;MARGIN: 0px auto; WIDTH: 988px! important; padding-top:13px;
#souall .submitwidth:50px;height:25px; border:1px;
#souall .input font-size:16px; background-color:#CCCCCC; margin-left:5px;
#souall .b width:800px; border:1px solid #000000;
#xx width:10px; background-color:#000000; float:left;>
>
</style>
</head>
<body>
<DIV id=souall>
<DIV class=b>
<FORM action=search.php method=get target=_self>
<INPUT class=input id=keywords alt="搜索: 请输入关键字" size=30 name=keywords>
<INPUT type=hidden value=keywords>
<INPUT class=submit type=submit value=搜索>
热门关键字：<A href="search.php?keywords=电动车" target=_blank>电动车</A> <A href="search.php?keywords=搬家" target=_blank>搬家</A> <A href="search.php?keywords=快递" target=_blank>快递</A> <A href="search.php?keywords=大学生"target=_blank>大学生</A> <A href="search.php?keywords=诺基亚手机" target=_blank>诺基亚手机</A> <A href="search.php?keywords=广告设计" target=_blank>广告设计</A>
</FORM>
</DIV>
<div id="xx">这里和搜索在同一行</div>
</DIV>
</body>
</html>
这就行了。 参考技术A float:left; 计算好宽度 参考技术B 你这个现在是在同一行啊
尝试让两个div显示在同一行上
缘由
摸鱼的时候在V2EX上看到一篇帖子，通过JS代码实现控制台输出某网站LOGO，感觉挺有意思的，想将其当网页元素插入网页，因此就有了本文。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>尝试让两个div显示在同一行上</title>
<style>
.porn {
color: #ffffff;
background: #000000;
padding:5px 10px;
font-size:40px;
border-radius:12px 0 0 12px;
}
.hub {
color: #000000;
background: #FE9A00;
padding:5px 10px;
font-size:40px;
border-radius:0 12px 12px 0;
}
</style>
</head>
<body>
<!-- 一个div内嵌套两个div,设置这两个被嵌套的 div 的 style 属性为"float: left;" -->
<!-- 此方法一般都会有效的，但不建议这么做 -->
<div style="display: inline;">
<div class="porn" style="float: left;">Porn</div>
<div class="hub" style="float: left;">hub</div>
<div style="clear:both;"></div> <!-- 清除float效果 -->
<!-- div 设置 float之后，如果没有清除 -->
<!-- 则下一个被设置 float 的 div 会根据上一个 float 的 div 的布局进行排版 -->
<!-- 而下一个没设置 float 属性的 div 则是根据它的前一个元素进行排版。 -->
</div>
<br />
<!-- 当行内元素处理 -->
<div>
<div class="porn" style="display: inline;">Porn</div>
<div class="hub" style="display: inline;margin-left:-4px;">hub</div>
</div>
<br />
<!-- table大法好！ -->
<table style="margin: 0px;padding: 0px;">
<td style="margin: 0px;padding: 0px;"><div class="porn" style="margin-left: -2px;">Porn</div></td>
<td style="margin: 0px;padding: 0px;"><div class="hub" style="margin-left: -2px;">hub</div></td>
</table>
</body>
</html>以上是关于怎么能让两个DIV标签在同一行的主要内容，如果未能解决你的问题，请参考以下文章
2个div标签同在一行，然后怎么让他们2个的宽度一样，占满整的一行？