Question

.Hi。这可能是一个常见/简单的问题，但我几个小时都无法解决这个问题。我一直在创建一个用户表单进行打印，但正如您所看到的（在剪切中），文本并不适合浮动。有人可以帮我吗？提前谢谢。

＆＃13;

.formInf 
{
    border:1px solid red;
    height:15px;
    font-size:13px;
    float:right; 
    margin-right:10px; 
    margin-top:2px;
}

.line 
{
    margin-top:5px;
    width:98%;
    height:20px;
    border:1px solid red;
}

＆＃13;

<div class="line"><p class="formInf"><b>27/05/2017</b></p></div>
        <div class="line"><p class="formInf"><b>Ataoglu</b></p></div>
        <div class="line"><p class="formInf"><b>areaareaarearaearasdasdasdasdasdasdasdasdasd</b></p></div>

＆＃13;

Answer 1

简单的浮动问题。加上这个：

.line {
  clear:both;    /* add this line */

如果可能，您可以避免使用float，而是使用text-align

＆＃13;

.line {
  border: 1px solid red;
  text-align: right;       /* 1. */
}

.formInf {
  display: inline-block;   /* 2. */
  vertical-align: top;     /* 3. */
  margin:0;
  border: 1px solid red;
}

＆＃13;

<div class="line">
  <p class="formInf"><b>27/05/2017</b></p>
</div>
<div class="line">
  <p class="formInf"><b>Ataoglu</b></p>
</div>
<div class="line">
  <p class="formInf"><b>areaareaarearaearasdasdasdasdasdasdasdasdasd</b></p>
</div>

＆＃13;

Answer 2

解决方案1：

将float:left;或display:inline-block或clear:both应用于.line（父div）。

你走了：

＆＃13;

.formInf 
{
    border:1px solid red;
    height:15px;
    font-size:13px;
    float:right; 
    margin-right:10px; 
    margin-top:2px;
}

.line 
{
    margin-top:5px;
    width:98%;
    height:20px;
    border:1px solid red;
    
    display:inline-block;
}

＆＃13;

<div class="line"><p class="formInf"><b>27/05/2017</b></p></div>
        <div class="line"><p class="formInf"><b>Ataoglu</b></p></div>
        <div class="line"><p class="formInf"><b>areaareaarearaearasdasdasdasdasdasdasdasdasd</b></p></div>

＆＃13;

解决方案2： 更改p tags。

的边距

你走了：

＆＃13;

.formInf 
{
    border:1px solid red;
    height:15px;
    font-size:13px;
    float:right; 
    margin-right:10px; 
    margin-top:2px;
}

.line 
{
    margin-top:5px;
    width:98%;
    height:20px;
    border:1px solid red;
    
    
}
.line  p{ margin:0px;}

＆＃13;

<div class="line"><p class="formInf"><b>27/05/2017</b></p></div>
        <div class="line"><p class="formInf"><b>Ataoglu</b></p></div>
        <div class="line"><p class="formInf"><b>areaareaarearaearasdasdasdasdasdasdasdasdasd</b></p></div>

＆＃13;

Answer 3

覆盖默认保证金。

.formInf {
  border: 1px solid red;
  height: 15px;
  font-size: 13px;
  float: right;
  margin: 2px 10px 0px 0px;

  
}

.line {
  margin-top: 5px;
  width: 98%;
  height: 20px;
  border: 1px solid red;
}

<div class="line">
  <p class="formInf"><b>27/05/2017</b></p>
</div>
<div class="line">
  <p class="formInf"><b>Ataoglu</b></p>
</div>
<div class="line">
  <p class="formInf"><b>areaareaarearaearasdasdasdasdasdasdasdasdasd</b></p>
</div>

Answer 4

<style>.formInf 
{
    clear:right;
    border:1px solid red;
    height:15px;
    font-size:13px;
    float:right; 
    margin-right:10px; 
    margin-top:2px;
}

.line 
{
    margin-top:5px;
    height:40px;
    border:1px solid red;
}
</style>
        <div class="line"><p class="formInf"><b>27/05/2017</b></p></div>
        <div class="line"><p class="formInf"><b>Ataoglu</b></p></div>
        <div class="line"><p class="formInf"><b>areaareaarearaearasdasdasdasdasdasdasdasdasd</b></p></div>

＆＃34;明确：对＆＃34;作为断行，我也删除了行：-width：98％阻碍了另一个div

Answer 5

因为每个div都有类行，你在css中提到.line应该有98％的宽度。更改宽度或从子div中删除class = line。

Answer 6

在.formInf班级中，只需将float:right;替换为text-align:right;

div风格问题浮动中的文字并不像我想的那样工作

6 个答案: