Question

当我写<div name="a">Foo</div><div name="b">bar</div>时，我想要水平对齐而不是垂直对齐。怎么做？有一个简单的方法吗？默认情况下，它是垂直对齐。

Answer 1

将div设置为内联块：

.a, .b {
  display: inline-block;
}

这假设元素的类为a和b，而不是名称，就像您发布的HTML一样。使用此方法，您还可以使用vertical-align属性垂直排列元素，即对齐顶部，中间或底部：

+---+
|   | +---+
| A | | B |
|   | +---+
+---+

Answer 2

div的默认显示模式是“block”，其中包括div之前和之后的换行符。如果你不想换行，你可以将display属性更改为内联，只要父元素中有足够的宽度来包含两个div，它就应该水平对齐。

显示属性： http://www.w3schools.com/css/pr_class_display.asp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<div style="width:510px; background-color:#ffee88;">
   <div style="display:inline; background-color:#ffeeff;">
      check check 1 2
   </div>
   <div style="display:inline; background-color:#eeffff;">
      hello this time
   </div>
</div>
</html>

Answer 3

试试这个：

<div style="float:left;" name="a">Foo</div><div style="float:left;" name="b">bar</div>

此外，您可以设置每个div的宽度：

<div style="float:left;width:30%;" name="a">Foo</div><div style="float:left;width:70%;" name="b">bar</div>

Answer 4

您可以使用 SPAN 标记来包装您的Foo和bar元素，也可以将每个div的CSS'display'属性设置为'inline-block'。

<div name="a" style="display:inline-block">Foo</div>
<div name="b" style="display:inline-block">bar</div>

Answer 5

这些不是“垂直对齐”，它们是block elements vs. inline elements。

简单的答案：使用 SPAN ，而不是 DIV

Answer 6

这应该这样做：

<div name="a" style="float:left; width: 100px;">Foo</div>
<div name="b"  style="float:left; width: 100px;">bar</div>
<div style="clear:both"></div>

Answer 7

你总是可以使用样式表进行绝对定位，使你的div在同一行排成一行。例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        #logo
        {
            background: #000000;
            position: absolute;
            left: 0px;
            top: 0px;
            width: 250px;
            height: 200px;
        }
        #Banner
        {
            background: #1071A6;
            position: absolute;
            left: 250px;
            top: 0;           
            width: 850px;
            height: 250px;
        }
    </style>
</head>
<body>
    <div id="logo">
    </div>
    <div id="Banner">
    </div>
</body>
</html>

Answer 8

假设：

<div id='someSectionOfMyPage'>
   <div name="a">Foo</div>
   <div name="b">bar</div>
</div>

添加到您的样式表：

#someSectionOfMyPage div {
  display: inline-block;
}

同时检查css定位的these examples。

我想将<div> b与<div>水平对齐，有一种简单的方法吗？</div> </div>

8 个答案: