如何在div的左側添加加號

Question

我有一些div，並嘗試在h3元素后的div左側添加加號。 我設法用span添加了加號，但不會移到左側，而是保持居中。

 .wrapper { position: absolute; top: 0; left: 0; width: 100%; } .chatter { margin-top:5px; width:70%; border-spacing:5px; table-layout: fixed; empty-cells:show; border-collapse:separate; font:78%/130% "Arial", "Helvetica", sans-serif; border:1px solid gray; box-shadow:0px -1px 2px 1px #d2d6d8; border-top:1px solid #eee; border-right:1px solid #d2d5d7; border-left:1px solid #d2d5d7; border-bottom:1px solid #d2d5d7; border-radius:3px; font-size:large; } .c_head { box-shadow:0px -1px 2px 1px #d2d6d8; border-top:1px solid #eee; border-right:1px solid #d2d5d7; border-left:1px solid #d2d5d7; border-bottom:1px solid #d2d5d7; padding-right:9px; height:31px; overflow:hidden; margin-bottom:1px; border-radius:3px; } .c_header { margin:0; padding:0; padding-left:9px; color:#777777; overflow:hidden; height:31px; line-height:31px; font-size:1.2em; font-weight:bold; padding-bottom:3px; } 

 <div class="wrapper" style="height:100%; background-color:Silver;"> <center> <div class="chatter" runat="server"> <div class="c_head"> <h3 class="c_header">Chat - BETA<span style="text-align:left; padding-left:0; position:relative; left:0;">+</span></h3> </div> </div> </center> </div> 

如何設置它使其與div的左側對齊？ 到目前為止，我已經嘗試過任何方法。

Answer 1

你可以實現，通過定位<span>元件absolute Ly和給出position的relative向<div>建立包含塊的絕對定位的元素。

然后，您可以使用left偏移量或其他偏移量將元素移動到右位置。

 .wrapper { position: absolute; top: 0; left: 0; width: 100%; } .chatter { margin-top:5px; width:70%; border-spacing:5px; table-layout: fixed; empty-cells:show; border-collapse:separate; font:78%/130% "Arial", "Helvetica", sans-serif; border:1px solid gray; box-shadow:0px -1px 2px 1px #d2d6d8; border-top:1px solid #eee; border-right:1px solid #d2d5d7; border-left:1px solid #d2d5d7; border-bottom:1px solid #d2d5d7; border-radius:3px; font-size:large; margin-left: auto; /* <-- Added declarations */ margin-right: auto; /* instead of <center> */ text-align: center; /* dropped element. */ } .c_head { box-shadow:0px -1px 2px 1px #d2d6d8; border-top:1px solid #eee; border-right:1px solid #d2d5d7; border-left:1px solid #d2d5d7; border-bottom:1px solid #d2d5d7; padding-right:9px; height:31px; overflow:hidden; margin-bottom:1px; border-radius:3px; position: relative; /* <-- Added declaration */ } .c_header { margin:0; padding:0; padding-left:9px; color:#777777; overflow:hidden; height:31px; line-height:31px; font-size:1.2em; font-weight:bold; padding-bottom:3px; } .c_header > span { position:absolute; /* <-- Edited declaration */ left:0; } 

 <div class="wrapper" style="height:100%; background-color:Silver;"> <div class="chatter" runat="server"> <div class="c_head"> <h3 class="c_header">Chat - BETA<span>+</span></h3> </div> </div> </div> 

---

附帶說明： <center>元素自HTML 4起已被棄用，而自HTML 5起已被刪除-但是某些Web瀏覽器仍支持該元素。 因此，不應將其用於新項目。

相反，為了使塊級元素在中心對齊，您可以將元素的左右margin設置為auto 。 對於內聯級別的元素，您可以將text-align: center設置在父元素的text-align: center 。

Answer 2

我想你可以把它浮下來嗎？ 然后，您可能還想清除封閉容器上的浮標。

.group:after {
  content: "";
  display: table;
  clear: both;
}
...
<div class="c_head group">
  <h3 class="c_header">Chat - BETA<span style="float:left; padding-left:0; position:relative; left:0;">+</span></h3>
</div>

取決於您支持的瀏覽器。

Answer 3

這樣的東西？

HTML

<div class="wrapper" style="height:100%; background-color:Silver;">
    <center>
        <div class="chatter" runat="server">
            <div class="c_head">
                <div class="plus"> <h3> +     </h3> </div>
                <div class="c_header"> <h3>Chat - BETA</h3> </div>
            </div>
        </div>
    </center>
</div>

CSS

.wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.chatter
{
   margin-top:5px;
   width:70%;
   border-spacing:5px;
   table-layout: fixed;
   empty-cells:show;
   border-collapse:separate;
   font:78%/130% "Arial", "Helvetica", sans-serif;
   border:1px solid gray;
   box-shadow:0px -1px 2px 1px #d2d6d8;
    border-top:1px solid #eee;
    border-right:1px solid #d2d5d7;
    border-left:1px solid #d2d5d7;
    border-bottom:1px solid #d2d5d7;
   border-radius:3px;
   font-size:large;
}
.c_head
{
    box-shadow:0px -1px 2px 1px #d2d6d8;
    border-top:1px solid #eee;
    border-right:1px solid #d2d5d7;
    border-left:1px solid #d2d5d7;
    border-bottom:1px solid #d2d5d7;
    border-radius:3px;
}
.c_header
{
    width:70%;
    color:#777777;
    height:100%;
    font-size:1.2em;
    font-weight:bold;
}

.plus {width:30%; height:100%; float:left; font-size:31px;}

http://jsfiddle.net/ockzukjs/

Answer 4

在HTML中將內聯樣式刪除為h3

 .wrapper { position: absolute; top: 0; left: 0; width: 100%; } .chatter { margin-top: 5px; width: 70%; border-spacing: 5px; table-layout: fixed; empty-cells: show; border-collapse: separate; font: 78%/130%"Arial", "Helvetica", sans-serif; border: 1px solid gray; box-shadow: 0px -1px 2px 1px #d2d6d8; border-top: 1px solid #eee; border-right: 1px solid #d2d5d7; border-left: 1px solid #d2d5d7; border-bottom: 1px solid #d2d5d7; border-radius: 3px; font-size: large; } .c_head { box-shadow: 0px -1px 2px 1px #d2d6d8; border-top: 1px solid #eee; border-right: 1px solid #d2d5d7; border-left: 1px solid #d2d5d7; border-bottom: 1px solid #d2d5d7; padding-right: 9px; height: 31px; overflow: hidden; margin-bottom: 1px; border-radius: 3px; } .c_header { margin: 0; padding: 0; padding-left: 9px; color: #777777; overflow: hidden; height: 31px; line-height: 31px; font-size: 1.2em; font-weight: bold; padding-bottom: 3px; position: relative; } .c_header:before { content: "+"; position: absolute; left: 0; } .c_header:after { content: "+"; position: absolute; right: 0; } 

 <div class="wrapper" style="height:100%; background-color:Silver;"> <center> <div class="chatter" runat="server"> <div class="c_head"> <h3 class="c_header">Chat - BETA</h3> </div> </div> </center> </div> 

我做了什么：

更改了這一行HTML

<h3 class="c_header">Chat - BETA</h3>

將此添加到CSS

    .c_header
    {
        margin:0;
        padding:0;
        padding-left:9px;
        color:#777777;
        overflow:hidden;
        height:31px;
        line-height:31px;
        font-size:1.2em;
        font-weight:bold;
        padding-bottom:3px;
        position: relative;
    }
    .c_header:before {
      content:"+";
      position: absolute;
      left:0;
    }
    .c_header:after {
      content:"+";
      position: absolute;
      right:0;
    }