Question

我试图在一行上左右对齐一些文字。我可以对齐它，但我的CSS不会跨越整个行。

Here是一个jsFiddle。＆＃34;测试＆＃34; line是它看起来如何正常，但我想左右对齐文本。我能够左右对齐文本，但灰色条不能一直穿过。我希望整行都是灰色条，而不仅仅是文本。

HTML

<h2>Test</h2>

<div>
    <h2 class="alignleft">A</h2>
    <h2 class="alignright">B</h2>    
</div>

CSS

h2 {
    background-color: #555;
    color: #FFF;
    letter-spacing: 1px;
    margin: 20px 0;
    padding: 5px;
}

.alignleft {

    float: left;
}

.alignright {

    float: right;

我该如何解决这个问题？

Answer 1

使用h2位置绝对内div个元素的一个解决方案（不更改html结构）：

h2 {
  background-color: #555;
  color: #FFF;
  letter-spacing: 1px;
  margin: 20px 0;
  padding: 5px;
  width: 90%;
  margin: 0 auto;
}
div > h2 {
  width: 5%;
  position: absolute;
  top: 8px;
  margin: 0;
  padding: 0;
  height: 37px;
  line-height: 37px;
  text-align: center;
}
div > h2:last-child {
  right: 9px;
}

<h2>Test</h2> 
<!-- How it looks normally -->
<div>
  <h2 class="alignleft">A</h2>

  <h2 class="alignright">B</h2> 
</div>

Answer 2

我建议，最简单的是：

div {
  /* forcing the element to clear floats: */
  clear: both;
  /* to force the <div> to wrap around its floated elements: */
  overflow: hidden;
  /* to float right, an element has to appear earlier in the
     HTML than float left content; so instead we align the
     text to the right of the parent: */
  text-align: right;
  background-color: #aaa;
  margin-bottom: 10vh;
}
h2.alignleft {
  /* float this element off to the left: */
  float: left;
}

<h2>Just a &lt;h2&gt;, without classes</h2>
<h2 class="alignleft">Text in just &lt;h2&gt;</h2>
<div>
  <h2 class="alignleft">Text in both &lt;h2&gt; and &lt;div&gt;</h2>
</div>
<div>
  <h2 class="alignleft">A</h2>
  <h2 class="alignright">B</h2> 
</div>

Answer 3

而不是对代码进行大规模更改。只需为div赋予background-color属性，并在中断或任何元素上使用clear:both;清除浮动元素，以使其识别元素。

这是一个有效的JSFiddle：http://jsfiddle.net/fLj5qvc7/

HTML

<div>
    <h2 class="alignleft">A</h2>
    <h2 class="alignright">B</h2>    
    <br style="clear:both;" />
</div>

CSS

h2 {
    color: #FFF;
    letter-spacing: 1px;
    padding: 5px;
    margin:0;
}

div {
    background-color: #555;
}

.alignleft {

    float: left;
}

.alignright {

    float: right;
}

Answer 4

您可以尝试这样的事情：

<强> HTML

<div>
    <h2 class="alignleft">A</h2>
    <h2 class="alignright">B</h2>    
</div>

<强> CSS

h2 {
    background-color: #555;
    color: #FFF;
    letter-spacing: 1px;
    margin: 0;
}

.align {
    background-color: #555;
    margin: 20px 0;
    padding: 5px;
}

.alignright {
    float: right;
}

Here是一个实例。

Answer 5

你的问题不清楚你真正想要什么。我的理解是你想要A和B段落填满页面的全长。如果是这么简单，您可以在CSS中为两个标题使用 display：block; 属性。

Answer 6

需要帮助CSS的宽度。另外，您如何构建HTML。如果您有疑问，请告诉我。

HTML

<div class="wrapper">
        <h2 class="alignleft">A</h2>
        <h2>Test</h2> <!-- How it looks normally -->  
        <h2 class="alignright">B</h2>  
    </div>

CSS

  wrapper {
            width: 100%;
        }
        h2 {
            position: relative;
            background-color: blue;
            color: #FFF;
            letter-spacing: 1px;
            width: 80%;
            float:left;
        }

        .alignleft {
           position: relative;
            background-color: red;
            float: left;
            width: 10%;
        }

        .alignright {
            position: relative;
            background-color: green;
            width: 10%;
            float: right;
        }

Answer 7

有时简单和老派更好。使用表格！

<table width="100%">
    <tr>
        <td align="left"><h2>A</h2></td>
        <td align="right"><h2>B</h2></td>
    </tr>
</table>

Answer 8

做这样的事情：

<强> HTML

<div class="h2-plate">
    <h2 class="alignleft">A</h2>
    <h2 class="alignright">B</h2>    
</div>

<强> CSS

 .h2-plate { 
    width: 100%;
   height: auto;
    position: relative;

}


h2 {
    background-color: #555;
    color: #FFF;
    letter-spacing: 1px;
    padding: 1%;
    width: auto;
}

.alignleft {
    float: left;
    display: block;
    text-align: left;
    width: 48%;

}

.alignright {
    float: left;
    width: 48%;
    display: block;
    text-align: right;
}

See working example

Answer 9

这个缩进右边的示例与我的scss一起很好地工作：

style="display:inline; 
float: right; 
position: relative;"

Answer 10

使用引导程序（当前为4.0）：

<h2 class="text-left">A</h2>
<h2 class="text-right">B</h2>

瞧，您不必执行其他任何操作

左对齐和右对齐h2与css类在一行中

10 个答案: