Question

我有一些div并尝试在h3元素之后在div的左侧添加一个加号字符。我已设法在span添加加号，但它不会转到左侧，它会保持居中......

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如何设置它以使其与div中的左侧对齐？我现在已经尝试了任何东西。

Answer 1

您可以通过定位<span>元素absolute来实现这一目标，并为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>

作为旁注：自HTML 4以来已弃用<center>元素并从HTML 5开始删除 - 但某些Web浏览器仍然支持它。因此，它不应该用于新项目。

相反，为了在中心对齐块级元素，您可以将元素的左右margin设置为auto。对于内联级元素，您可以在父元素上设置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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我做了什么：

更改了这一行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;
    }

如何在div的左侧添加一个加号字符

4 个答案: