Question

我希望在[div class =“ col-md-4”]和[div class =“ col-md-8”]之间的垂直线的某些位置上有粗点。

下面是我尝试过的

<div class="col-md-4" style="border-right:1px solid #333;">
<h1>1987</h1><p>lorem ipsom .........</p>
<h1>1990</h1><p>lorem ipsom .........</p>
<h1>1998</h1><p>lorem ipsom .........</p>
</div>

<div class="col-md-8">
description
</div>

它在第4类和第8类之间创建了一条垂直线，但我也希望每年在该垂直线上都设置粗点。每年如何显示点？

Answer 1

您可以这样构造HTML：

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    defaultConfig  {
        applicationId "com.example.nazish.cityappdemo"
        minSdkVersion 19
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        vectorDrawables.useSupportLibrary = true
        multiDexEnabled true
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {



    implementation 'com.android.support:multidex:1.0.2'

    //compile 'com.android.support:multidex:1.0.1'
    //compile 'com.jjoe64:graphview:4.2.1'
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    //noinspection GradleCompatible
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support:design:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:0.5'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:2.2.2'

    implementation 'com.android.support:cardview-v7:26.0.0'
    implementation 'com.android.support:recyclerview-v7:26.0.0'

    //implementation 'com.google.firebase:firebase-auth:16.2.1'
    //compile 'com.google.firebase:firebase-database:11.6.0'
    //compile 'com.google.firebase:firebase-storage:11.6.0'
    //compile 'com.google.firebase:firebase-ui-database:11.6.0'
    //noinspection GradleCompatible
    implementation 'com.google.firebase:firebase-database:16.0.1'
    implementation 'com.firebaseui:firebase-ui-database:4.0.0'
    implementation 'com.google.firebase:firebase-core:16.0.1'


    //noinspection GradleCompatible
    //implementation 'com.google.firebase:firebase-core:16.0.8'
    //implementation 'com.google.firebase:firebase-firestore:18.2.0'

}
apply plugin: 'com.google.gms.google-services'

然后像这样应用CSS

<div class="timeline">
    <div class="timeline__item">
        <div class="timeline__item__date"> 1995 </div>
        <div class="timeline__item__text"> lorem ipsom </div>
    </div>
    <div class="timeline__item">
        <div class="timeline__item__date"> 2005 </div>
        <div class="timeline__item__text"> lorem ipsom </div>
    </div>
    ...
</div>

如果要将点从.timeline__item { position: relative; width: 100%; } .timeline__item::before { /* required for the ::before pseudo-element to be rendered */ content: ''; /* positioning the element */ position: absolute; left: 0; top: 50%; transform: translate(xvalue , -50%); /* change the xvalue to reposition horizontaly, to be where your 'line' is */ /* creates the 'color-of-the-text colored circle' */ width: 5px; height: 5px; background-color: currentColor; border-radius: 50%; }的左侧（当前位置）移到右侧，请将.timeline__item更改为.timeline__item::before { left: 0; }。

这应该使您正确地开始正确的道路。如果您再提出其他一些具体问题，其他用户将更容易指导您前进。

如何使用CSS创建带有数字点的垂直线？

1 个答案: