Question

CSS: ul {
  list-style: cjk-ideographic;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: justify;
}

li {
  color: #cd8252;
}

ul li p {
  color: black;
  font-weight: normal;
  padding-left: none;
}

ul li span.list-ability {
  font-family: 'Centrale-Sans-Medium';
  font-size: 15pt;
  font-weight: bold;
  color: #000;
}

.list-left {
  width: 390px;
  position: absolute;
  float: left;
}

.list-left ul {
  margin-right: -10px;
  margin-bottom: 10px;
  padding-right: 20px;
}

.h-line {
  display: inline-block;
  width: 40%;
  border: 2px solid #f1dccf;
  margin-top: 20px;
  margin-left: 10px;
}

<div class="list-left">
  <ul>
    <li><span class="list-ability">Friendliness</span><div class="h-line"></div><br>
      <p class="list-desc">Be able to be friends with everyone</p>
    </li>
  </ul>
  <ul>
    <li><span class="list-ability">Dominance</span><div class="h-line"></div><br/>
      <p class="list-desc">You do not hesitate to impress your own others on others and take charge of situations when required. You may come across as dominant or controlling to others, and appear dismissive of others' views.</p>
    </li>
  </ul>
  <ul>
    <li><span class="list-ability">Adventuresome</span><div class="h-line"></div><br>
      <p class="list-desc">You prefer routine and staying with familiar roles within your comfort zone. You may nd it di cult to adapt to change and may choose to forgo new experience and opportunities to learn.</p>
    </li>
  </ul>
</div>

此处的代码将在列表标签之后显示一个带有水平线的列表，因此在此列表中，我希望该行从其所在元素的右侧开始。可能吗？如果是这样，我该怎么办？

Answer 1

我认为这就是您想要的，修改了一些html并利用CSS达到了目标。

.list-ability {
    position: relative;
}

.list-ability span {
    background-color: white;
    padding-right: 10px;
}

.list-ability:after {
    content:"";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.5em;
    border-top: 1px solid black;
    z-index: -1;
}

<div class="list-left">
  <ul>
    <li><div class="list-ability"> <span>Friendliness</span></div><div class="h-line"></div><br>
      <p class="list-desc">Be able to be friends with everyone</p>
    </li>
  </ul>
  <ul>
    <li><div class="list-ability"><span>Dominance</span></div><br/>
      <p class="list-desc">You do not hesitate to impress your own others on others and take charge of situations when required. You may come across as dominant or controlling to others, and appear dismissive of others' views.</p>
    </li>
  </ul>
  <ul>
    <li><div class="list-ability"><span>Adventuresome</span></div><br>
      <p class="list-desc">You prefer routine and staying with familiar roles within your comfort zone. You may nd it di cult to adapt to change and may choose to forgo new experience and opportunities to learn.</p>
    </li>
  </ul>
</div>

Answer 2

这就是我们创建水平线的方式，而我使它从右边开始

var RouteConfigs = {
    A: {screen: A},
    B: {screen: B},
    C: {screen: C},
    D: {screen: D},
    E: {screen: E},

}
var BottomTabNavigatorConfig = {
    navigationOptions: ({navigation})=>{
       is_visible = navigation.state.routeName != 'E'
       return {tabBarVisible: is_visible}
    }
}
var ListTabNavigator = createBottomTabNavigator(
    RouteConfigs, BottomTabNavigatorConfig
)

CSS

docker-compose up

如何使水平线从div元素的右边开始？

2 个答案: