Question

我有四个用HTML5 / CSS3 / JS开发的标签，如下所示。

我已将display:inline-block;用于制表符div，将text-align:center用于其父div，以找到页面中心的所有四个制表符。

<div class='parent'>
    <div class='tabItem'>YOU</div>
    <div class='tabItem'>DATABASE</div>
    <div class='tabItem'>TASKS</div>
    <div class='tabItem'>HELP</div>
</div>

CSS3：

.parent{text-align:center;}
.tabItem{display:inline-block;}

现在我想找到两个标签，即页面右侧的YOU和HELP，以及其他标签，即页面中心的DATABASE和TASKS。我想知道我该怎么做。

首选div元素遵循页面的自然流程。

Answer 1

做这样的事情

.parent{text-align:center;}
.tabItem{display:inline-block;}
.right{float:right;}
.left{float:left;}

<div class='parent'>
    <div class='tabItem left'>Content for Left</div>
    <div class='tabItem'>DATABASE</div>
    <div class='tabItem'>TASKS</div>
    <div class='tabItem right'>YOU</div>
    <div class='tabItem right'>HELP</div>
</div>

Answer 2

这是你的解决方案！

.parent{text-align:center;}
.tabItem{display:inline-block;}
.right {
float: right;
}

<div class='parent center'>
    <div class='tabItem'>DATABASE</div>
    <div class='tabItem'>TASKS</div>
      <div class='parent right'>
        <div class='tabItem'>YOU</div>
        <div class='tabItem'>HELP</div>
      </div>
</div>

Answer 3

希望这会有所帮助!!

<html>
  <head>
    <style>
        .parent{text-align:center;}
        .tabItem{display:inline-block;}
        #right {float: right;}
    </style>
  </head>
  <body>
    <div class='parent'>
        <div class='tabItem'>DATABASE</div>
        <div class='tabItem'>TASKS</div>
        <div id="right" class='tabItem'>YOU</div>
        <div id="right" class='tabItem'>HELP</div>
    </div>
  </body>
</html>

或者只是将这两个div放在父容器中并给它一个id =“right”以避免重复id !!

Answer 4

我认为您需要设置需要重新定位到绝对位置的标签，这样它们就会超出正常的内容流程，然后您可以真正将其他两个标签集中在一起。

.parent {
  background: pink;
  text-align: center;
  position: relative;
}
.tabItem {
  margin: 0 5px;
  display: inline-block;
  background: aqua;
}
.tabItem:nth-child(1) {
  position: absolute;
  right: 50px; /* width of "HELP" tab */
}
.tabItem:nth-child(4) {
  position: absolute;
  right: 0;
}

<div class='parent'>
  <div class='tabItem'>YOU</div>
  <div class='tabItem'>DATABASE</div>
  <div class='tabItem'>TASKS</div>
  <div class='tabItem'>HELP</div>
</div>

Answer 5

CSS3功能display:flex也是一个选项。可以玩它来看它是否会起作用。

.parent{
    display:flex;
    justify-content:center;
}

.item{
    padding: 10px;
    text-transform:uppercase;
}

.right{
    margin-left:auto;
}

.left{
    margin-right:auto;
}

<div class="parent">
    <div class="item left">you</div>
    <div class="item">database</div>
    <div class="item">tasks</div>
    <div class="item right">help</div>
</div>

div元素在中心和右边的对齐

5 个答案: