Question

我的div内容位于span标签之后。 div的内容是200+个字符，在150个字符之后，下一行开始，并且从左开始，但是我希望它应该从其开始的行的正下方开始。

我尝试了break（br）和文本居中对齐，并尝试了空格\ r \ n和padding，似乎没有任何作用。

请找到以下元素的内容和div代码。

label and div content
label and div code

第二行应从其开始的行的正下方开始。

Answer 1

您可以在容器中使用flex。它将div放在跨度之后。

.container{
  display: flex;
}
.label{
  width: 200px;
  text-align: right;
  margin-right: 10px;
}

<div class="container">
  <span class="label">Adress: </span>
  <div class="content">wkejrkwghjkwgjwrgbkjwrgrwjg rweguherg ergouie rgoeurg ergouiherg erguherg ewrogherg erogher goerg ewrgieug ewrg wrgrwjg rweguherg ergouie rgoeurg ergouiherg erguherg ewroghergwrgrwjg rweguherg ergouie rgoeurg ergouiherg erguherg ewrogherg</div>
</div>

Answer 2

将显示设置为defun，并在divs CSS属性上添加flex。

Answer 3

您可以这样做

div.text {
    display:grid;
    grid-template-columns: 10% 90%;
}

<div class="text">
<span>Address</span>
<div>
kjsdfhkjsdfhs dkfjhs djhfs kdjfkshjd fkjhsd kjhsdkfj sdkjf skdjhf ksjdhf kjsdh fkjhsdfkj sdkjfh skjdhf ksjdfk jsdkfhs dkjfhs kdjfskjdf ksjdhf ksjdhf ksjhdfkjshd fkjshdf kjsdkfj skdjfh skjdhf ksjdhf ksjdhf jshdfk jdsfkj skdjf skjdfh kjsdhfk jshdf kjhsdkfj hsdkjf skjdhf ksjdhf sdfksdfkjsd kjfhsdkjfh 
</div>
</div>

Answer 4

嘿，您可以尝试以下代码。

this.insertRecord(form).subscribe(result=> { 
this.service.OrderEvent.emit(); 
}, err=> {});

.flex-box{
display:flex;
}
.flex-box span{
width: 150px;
}
.flex-box > div{
padding-left: 10px;
}

Answer 5

这是一个具有居中对齐文本的div。您可以简单地使用它。

div.center-align {
  text-align: center;
}

<div class="center-align">
  This is a test text.This is a test text.This is a test text.This is a test text.This is a test text.This is a test text.This is a test text.This is a test text.This is a test text.This is a test text.This is a test text.This is a test text.This is a test text.This is a test text.This is a test text.This is a test text.This is a test text.This is a test text.This is a test text.
<div>

如何居中对齐div内容

5 个答案: