Question

我一直在尝试在一系列圆圈的中间画一条线，但是如果我设置一条线（.Line1）以适合第一个和最后一个元素，那么它就被绘制了从第一个元素的左上角而不是集中。如果我通过改变百分比来设置一条线（.Line2）以适应中间，那么在100％缩放时它看起来会很好，但是如果你放大或缩小它会移动它。

我知道可以使用纯javascript，但我无法弄清楚如何使用css创建的元素。

<style>
.A,.B,.C,.D, .E {
position: absolute;
width: 45px;
height: 45px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid black;
background: lightblue;
}
.A {
top: 10%;
left: 50%;
}
.B {
top: 25%;
left: 50%;
}
.C {
top: 40%;
left: 50%;
}
.D {
top: 55%;
left: 50%;
}
.E {
top: 70%;
left: 50%;
}
.Line1{
position: absolute;
left: 50%;
top: 10%;
height: 60%;
width: 4px;
background: black;
}
.Line2{
position: absolute;
left: 51.3%;
top: 15%;
height: 60%;
width: 4px;
background: black;
}
</style>

<body>
<div class = "A"></div>
<div class = "B"></div>
<div class = "C"></div>
<div class = "D"></div>
<div class = "E"></div>
<div class = "Line1"></div>
<div class = "Line2"></div>
</body>

http://codepen.io/anon/pen/ZWMbNe

Answer 1

您需要考虑边框，宽度和高度。你不能画半个像素。例如，这是一条中心线：

.A,.B,.C,.D, .E {
  position: absolute;
  width: 46px;
  height: 46px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid black;
  background: lightblue;
}

.Line1{
  position: absolute;
  left: 50%;
  top: 10%;
  height: 60%;
  width: 2px;
  background: black;
  transform: translate(24px,23px);
}

Answer 2

给其中一条线留下一个边距，该边距等于圆的宽度的一半。这样，无论你放大还是放大，这条线总是会保持在中间位置。

<?php
if(is_category() || is_archive()){
    /*get page with blog template set*/
    $post_template_page_array = get_pages(array(
        'post_type' => 'page',
        'post_status' => 'publish',
        'number' => 1,
        'meta_key' => '_wp_page_template',
        'meta_value' => 'template-blog.php',
        'sort_order' => 'ASC',
        'sort_column' => 'menu_order',
    ));
    $post_template_page = $post_template_page_array[0];

    echo wpb_js_remove_wpautop(apply_filters('the_content', $post_template_page->post_content));
    global $post;
    $post = $post_template_page;
    setup_postdata($post);
} else {
    if(have_posts()) : while (have_posts()) : the_post();
        the_content();
    endwhile; endif;
}
?>

Answer 3

您需要将圈子包装成父元素。这样您就可以根据父Div而不是窗口大小来对齐黑线。

此外，您可以将伪选择器:before或:after用于该行。

<强> HTML

<div class="cirCont">
  <div class="A"></div>
  <div class="B"></div>
  <div class="C"></div>
  <div class="D"></div>
  <div class="E"></div>
</div>

<强> CSS

.A,.B,.C,.D, .E {
  width: 45px;
  height: 45px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid black;
  background: lightblue;
}

.cirCont{
  float:left;
  position:relative;
  top: 100px;
  left: 50%;
}

.cirCont:after{
  content:"";
  position: absolute;
  left: calc(50% - 2px);
  top: 10%;
  height: 80%;
  width: 4px;
  background: black;
  z-index:10;
}

结帐pen

CSS在两个元素之间绘制一条线

3 个答案: