Html 文本在div内不左对齐

我试图将

div

中的一些

span

元素与其左边框对齐。 这是我当前的代码：

.bikoret
{
宽度：40%；
边框：1px纯黑；
}
.bikoret>.content
{
宽度：80%；
填充：0；
单词包装：打断单词；
}
.bikoret>.username
{
文本对齐：居中；
左：1%；
右：1%；
位置：相对位置；
左：0；
边框顶部：1px插图；
}

这是居中的
这是左对齐的

添加

显示：块

到你的类

。username

将完成这项工作，但这里有另一种方法

==========

通过给出

位置：相对

到您的容器

.bikoret

以及避免边框未覆盖

的高度。username

和

的绝对位置。username

也可以：

.bikoret {
  width: 40%;
  border: 1px solid black;
  position: relative;
  height: 40px;
}
.bikoret > .username {
  padding-left: 1%;
  padding-right: 1%;
  position: absolute;
  left: 0;
  border-top: 1px inset;
}

这里有一个

==========或者如果这都是关于除法器的===========

你可以这样做

<div class='bikoret'>
    <div class='content'>this is centered</div>
        <div class='divider'></div>
    <span class='username'>this is aligned to left</span>
</div>

---

这是

如果我理解正确，您希望“这是左对齐的”一直向左移动吗？如果是这样，那么您可以简化HTML和CSS

.textOuter{
宽度：100%；
浮动：左；
文本对齐：居中；
背景色：白色；
边框顶部：1px；
边框样式：插图；
利润上限：4倍；
左侧填充：10px；
右边填充：10px；
-webkit框大小：边框框；
-moz框大小：边框框；
-ms框尺寸：边框框；
-o型盒尺寸：边框盒；
框大小：边框框；
}
.textInner{
宽度：40%；
浮动：左；
位置：相对位置；
左：30%；
边框：1px纯黑；
}
.文本中心{
宽度：100%；
浮动：左；
}
人力资源{
宽度：80%；
浮动：左；
位置：相对位置；
左：10%；
保证金：0；
填充：0；
}
.textFull{
浮动：左；
}

这是居中的

这是左对齐的

居中a:设置

左边距：自动；右边距：自动到自身

居中：设置
文本对齐：居中到其父级

更新的工作演示：

HTML

以下是我将如何处理这个问题

首先，我使用当前样式为父块定义一个类，
.parent
，并添加
text align:center

对于子元素
.bikoret
，应用
display:inline block
，这意味着
此元素在父元素中居中。重要提示：设置
文本对齐：左

对于
.bikoret
的子元素，分别处理每个元素

对于
.content
，我会将宽度设置为
auto
，并将
text align:center
设置为文本居中

对于
.username
，这只是一个内联元素，并且由于其父元素（
.bikoret
）上的
文本对齐：left
，它位于您想要的左侧边缘


.parent{
文本对齐：居中；
背景色：白色；
边框顶部：1px；
边框样式：插图；
利润上限：4倍；
左侧填充：10px；
右边填充：10px；
}
比科雷特先生{
宽度：40%；
边框：1px纯黑；
显示：内联块；
文本对齐：左对齐；
}
.bikoret>.content{
文本对齐：居中；
宽度：自动；/*为什么是80%*/
填充：0；
单词包装：打断单词；
背景颜色：黄色；
}
.bikoret>.username{
左填充：1em；/*%此处填充不起作用*/
右侧填充：1em；
边框顶部：1px插图；
背景颜色：米色；
}

这是居中的
这是左对齐的
首先尝试修复您的短语。“居中向左”是矛盾的方式：）居中的部分应该保持不变。居中零件元素下的线应向左@nicaelI希望
用户名的宽度保持不变。我只想将其向左移动，而不调整div的大小，并
text align:left我不能依赖静态高度，因为div的内容可能会改变，我需要它与内容相关。
.bikoret {
  width: 40%;
  border: 1px solid black;
}
.divider {
    height: 1px;
    background: #909090;
    width: 60%;
}
.bikoret > .username {
    padding-left:1%;
    padding-right:1%;
    text-align:left;
    display:block;
}

<div dir="rtl" style="" runat="server" id="takzir">
    <center>
        <div class='bikoret'>
            <div class='content'>this is centered</div>
            <span class='username'>this is aligned to left</span>
        </div>
    </center>
</div>

#takzir {
    background-color:White;
    border-top:1px;
    border-style:inset;
    margin-top:4px;
    padding-left:10px;
    padding-right:10px;
}
.bikoret {
    width:40%;
    border:1px solid black;
    text-align: left;
}
.bikoret > .content {
    width:80%;
    padding:0;
    word-wrap: break-word;
    text-align:center;
    margin: auto;
}
.bikoret > .username {
    padding-left:1%;
    padding-right:1%;
    border-top:1px inset;
}