Question

大家好，我是前端网站开发的新手，还在学习。我需要在三个图标之间添加两条垂直线，请帮帮我。

这是我到目前为止所做的：

imageView = findViewById(R.id.profile_image);

    url_db = FirebaseDatabase.getInstance().getReference().child(retrievedName).child("Url");

    url_db.addValueEventListener(new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) {

            String url = dataSnapshot.getValue(String.class);

            if(url!= null){

                imageLoad.setVisibility(View.VISIBLE);


                Glide.with( User.this)
                        .load(url)
                        .into(imageView);

                imageLoad.setVisibility(View.INVISIBLE);

            }

        }

        @Override
        public void onCancelled(DatabaseError databaseError) {

        }
    });

.photo {
  background-image: url(photo.jpg.jpg);
  width: 100%;
  height: 500px;
  background-size: cover;
  color: hsla(325, 50%, 50%, 0.6);
}

h1 {
  text-align: center;
  padding-top: 15%;
}

.p {
  text-align: center;
  color: #FFCA28;
  padding-top: 0.5%;
  color: hsla(325, 50%, 50%, 0.6);
}

.Request {
  width: 200px;
  height: 100px;
  border-radius: 25px;
  font-size: 25px;
  color: #fff;
  line-height: 100px;
  text-align: center;
  background: #d50000;
  float: center;
  margin-left: 22em;
  margin-top: 2em;
}

.q {
  float: right;
  padding: 2%;
}

.j {
  text-align: center;
  color: grey;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.content-wrap {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.icon1 {
  width: 6rem;
  height: 6rem;
  font-size: 4rem!important;
  /* !important is here just to override SO styles*/
  color: #777;
  border: 2px solid #777777;
  border-radius: 50%;
  padding: 1rem;
  text-align: center;
  line-height: 6rem!important;
  /* !important is here just to override SO styles*/
}

Answer 1

I added the <hr> tag between the icons

<!DOCTYPE html>
      <html>
        <head>
         <title> JAMES UFONDU</title>
         <link rel="stylesheet" type="text/css" href="style.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
       </head>
       <body>
           <div class="q">
        Products Community Talk to Sales  Request Demo  En
           </div>
           <div class="photo">
           <h1> MANAGE YOUR CONDOMINIUM THE BETTER WAY</h1>
           <p class="p"> <strong>Use Evercondo to communicate, manage, organize, measure and optimize your day-to-day operations.</strong> </p> 
           <p class="Request">Request Demo</p>

           </div>

         <div class="j">
           <h2> How does Evercondon Work ? </h2>
           <p>Eliminate the chaos in your day-to-day management tasks</p>
         </div>  
        <div class="contentwrap">
          <i class="fa fa-car icon1"></i><hr> 
          <i class="fa fa-star-o icon1"></i> <hr>
          <i class="fa fa-signal icon1"></i><hr>
        <div> 
        </body>

Answer 2

在span中包裹i标签并添加此tyle

def create_driver():
    options = Options()
    if sys.platform == "darwin":
        options.binary_location = '/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary'
    options.add_experimental_option("detach", True)
    options.add_argument('allow-insecure-localhost') # I tried to be enable, but it does not affect to chrome.
    if sys.platform == "win32":
        chromedriver_path = r".\chromedriver"
    else:
        chromedriver_path = "../chromedriver"
    driver = webdriver.Chrome(chromedriver_path, chrome_options=options)
    return driver

.contentwrap span {
      border-right: 1px solid black;
      display: inline-block;
      padding-right: 18px;
      margin-right: 15px;
    }

photo {
  background-image: url(photo.jpg.jpg);
  width: 100%;
  height: 500px;
  background-size: cover;
  color: hsla(325, 50%, 50%, 0.6);
}

h1 {
  text-align: center;
  padding-top: 15%;
}

.p {
  text-align: center;
  color: #FFCA28;
  padding-top: 0.5%;
  color: hsla(325, 50%, 50%, 0.6);
}

.Request {
  width: 200px;
  height: 100px;
  border-radius: 25px;
  font-size: 25px;
  color: #fff;
  line-height: 100px;
  text-align: center;
  background: #d50000;
  float: center;
  margin-left: 22em;
  margin-top: 2em;
}

.q {
  float: right;
  padding: 2%;
}

.j {
  text-align: center;
  color: grey;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.content-wrap {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.icon1 {
  width: 6rem;
  height: 6rem;
  font-size: 4rem!important;
  /* !important is here just to override SO styles*/
  color: #777;
  border: 2px solid #777777;
  border-radius: 50%;
  padding: 1rem;
  text-align: center;
  line-height: 6rem!important;
  /* !important is here just to override SO styles*/
}

.contentwrap span {
  border-right: 1px solid black;
  display: inline-block;
  padding-right: 18px;
  margin-right: 15px;
}

在图标之间绘制垂直线条

2 个答案: