Question

我无法弄清楚什么是错的，我对下面代码的期望是文本应该显示在div中，蓝色背景和边框标记，但它显示在div下面，为什么会发生？

＆＃13;

public void onReceivedSslError(WebView view, final SslErrorHandler handler, SslError error) {
    AlertDialog.Builder builder = new AlertDialog.Builder(Tab1Activity.this);
    AlertDialog alertDialog = builder.create();
    String message = "SSL Certificate error.";
    switch (error.getPrimaryError()) {
        case SslError.SSL_UNTRUSTED:
            message = "The certificate authority is not trusted.";
            break;
        case SslError.SSL_EXPIRED:
            message = "The certificate has expired.";
            break;
        case SslError.SSL_IDMISMATCH:
            message = "The certificate Hostname mismatch.";
            break;
        case SslError.SSL_NOTYETVALID:
            message = "The certificate is not yet valid.";
            break;
    }

    message += " Do you want to continue anyway?";
    alertDialog.setTitle("SSL Certificate Error");
    alertDialog.setMessage(message);
    alertDialog.setButton(DialogInterface.BUTTON_POSITIVE, "OK", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
            // Ignore SSL certificate errors
            handler.proceed();
        }
    });

    alertDialog.setButton(DialogInterface.BUTTON_NEGATIVE, "Cancel", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {

            handler.cancel();
        }
    });
    alertDialog.show();
}

＆＃13;

.item-header {
  background-color: rgb(0, 246, 246);
  padding-right: 10px;
  padding-left: 10px;
  border-style: double;
  height: 20px;
}

.alignleft {
  background: transparent;
  float: left;
  width: 150px;
}

.alignright {
  background: transparent;
  float: right;
}

＆＃13;

Answer 1

首先，您需要从height中删除.item-header{ 然后另一个问题是浮动。如果你在一个元素中浮动元素，它就会失去高度。对此的一个解决方案是使用伪元素（:after）清除浮动，请查看：

.item-header:after {
  content: '';
  display: block;
  clear: both;
}

.item-header{
  background-color: rgb(0,246,246);
  padding-right: 10px;
  padding-left: 10px;
  border-style: double;
  /*height: 20px;*/
}

.item-header:after {
  content: '';
  display: block;
  clear: both;
}

.alignleft {
  background: transparent;
  float: left;
  width: 150px;
}
.alignright {
  background: transparent;
  float: right;
}

 <div class="item-header"  >

  <p class="alignleft">Author: {{post.author}}</p>
  <p class="alignright" (click)="ratingEditorClicked()">bias :{{post.bias_rating}}/5
     <ion-icon name="create" item-right ></ion-icon>
  </p>

 </div>

Answer 2

实际上它实际上是。这是因为您正在height对.item-header中的display:inline-block进行硬编码。

如果您使用timeMinute，则文本将进入div。

JSFiddle with example fixed

Answer 3

因为内部div是float。您已在.item-header

中设置20px of height

您需要在这些类型的设计上使用clearfix hack。

＆＃13;

.item-header {
  background-color: rgb(0, 246, 246);
  padding-right: 10px;
  padding-left: 10px;
  border-style: double;

}

.alignleft {
  background: transparent;
  float: left;
  width: 150px;
}

.alignright {
  background: transparent;
  float: right;
}

.clearfix {
  clear: both;
  position: relative;
  background-color: red;
}

＆＃13;

<div class="item-header">

  <p class="alignleft">Author: {{post.author}}</p>
  <p class="alignright" (click)="ratingEditorClicked()">bias :{{post.bias_rating}}/5
    <ion-icon name="create" item-right></ion-icon>
  </p>
  <div class='clearfix'/>

</div>

＆＃13;

Answer 4

根据您想要的CSS类的名称，除了蓝色框中的文本之外，p.alignleft与{em>列在同一行中左对齐p.alignright关于{{ 1}}如果是这样，你也可以这样做：

demo here

为什么我的文字显示为div？

4 个答案: