div标签在一行中带有装饰下划线

Question

我试图将三个div标签设置在一行中，并用一些空格和不同的下划线颜色分隔。为了让事情变得更容易，我正在努力做到这一点：

看到发布在Tech和分享和推文。这就是我想要做的。我看到了他们的源代码，并试图模仿。但失败了。你能帮我么？

 @Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);

    TestFrag demoFragment = (TestFrag) getSupportFragmentManager().findFragmentByTag("test");
    demoFragment.onActivityResult(requestCode, resultCode, data);
}

Answer 1

请删除内联样式并在样式表中添加类：

<div style="float:left; border-bottom:2px solid #1D1D1B; width:48%; margin-right:2%"><a href="#">POSTED IN TECH</a>
</div>
<div style="float:left; border-bottom:2px solid #FB473A; width:23%; margin-right:2%;">SHARE
</div>
<div style="float:left; border-bottom:2px solid #FB473A; width:23%;  margin-right:2%;">TWEET
</div>

Answer 2

Ensure the QueuedJobs module is installed and configured correctly. You should have a cronjob similar to the following in place, running as the webserver user.

*/1 * * * * cd  && sudo -u www php /sites/default/www/framework/cli-script.php dev/tasks/ProcessJobQueueTask

div
{
  display:inline-block;
  }
.source
{
  border-bottom:1px solid #000;
  }
.share
{
  border-bottom:1px solid red;
  }

Answer 3

使用display:flexbox;将相同行中的项目居中，border-bottom以获取彩色线条，margin-right用于间距。

＆＃13;

＆＃13;

.source, .share{
    font-family:sans-serif;
    width:100%;  
    margin-right:5px;
}
.source a{
    text-decoration:none;
    color:black;
}
.source h3,.share h3{
    margin-bottom:5px;
}
.share{
    border-bottom:2px solid red;  
}
.source{
    border-bottom:2px solid gray;  
}
.flex{
    display:flex; 
    width:100%;
    -webkit-justify-content: center;
    justify-content: center;
}

＆＃13;

<div class="flex">
<div class="source">
    <a href="#"><h3>source</h3></a>
</div>
<div class="share">
    <h3>share</h3>
</div>
<div class="share">
    <h3>tweet</he>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

为了完成屏幕截图中的操作，请保留HTML已发布的内容并为其编写CSS，如下所示。 （根据需要改变颜色和宽度）

.source {border-bottom:2px solid #000; width:48%; padding-bottom:10px; margin-right:2%}
.share {border-bottom:2px solid #d90000; width:23%; padding-bottom:10px; margin-right:2%}
.share:nth-child(2) {margin-right:0}

此致

Manoj Soni