How I can join
with display: inline-block? [duplicate]

前端未结

关注

 2  829

逝去的感伤

相关标签:

2条回答

半阙折子戏

2020-12-21 21:27

#content {
  white-space: nowrap;
}
#item1 {
  width: 500px;
}
#item2,
#item3 {
  width: 400px;
}
.item_ul {
  list-style-type: none;
  white-space: nowrap;
  overflow-x: auto;
  display: flex;
}

.item_li_first {
  display: inline-block;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}

.item_li {
  display: inline-block;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  border-left: 0px solid black;
}

<!DOCTYPE html>
<html>

<head>
  <title>Question</title>
  <style type="text/css">
  </style>
</head>

<body>
  <div id="content" style="overflow:scroll">
    <ul class="item_ul">
      <li id="item1" class="item_li_first">
        a
      </li>
      <li id="item2" class="item_li">
        b
      </li>
      <li id="item3" class="item_li">
        c
      </li>
    </ul>
  </div>
</body>

</html>

0 讨论(0)

青春惊慌失措

2020-12-21 21:50

One of the things that you can do is:

Set font-size: 0 for item_ul to remove the space characteristic of inline elements
Now reset the font-size to initial for the item_li

See demo below:

#content {
  white-space: nowrap;
}
#item1 {
  width: 500px;
}
#item2,
#item3 {
  width: 400px;
}
#item_ul {
  list-style-type: none;
  white-space: nowrap;
  overflow-x: auto;
  font-size: 0;
}
.item_li {
  border: solid 1px black;
  display: inline-block;
  font-size: initial;
}

<div id="content" style="overflow:scroll">
  <ul id="item_ul">
    <li id="item1" class="item_li">
      a
    </li>
    <li id="item2" class="item_li">
      b
    </li>
    <li id="item3" class="item_li">
      c
    </li>
  </ul>
</div>

Another option is to use  in the markup (and yes you are right write all the li in a single line) - see demo below:

#content {
  white-space: nowrap;
}
#item1 {
  width: 500px;
}
#item2,
#item3 {
  width: 400px;
}
#item_ul {
  list-style-type: none;
  white-space: nowrap;
  overflow-x: auto;
}
.item_li {
  border: solid 1px black;
  display: inline-block;
}

<div id="content" style="overflow:scroll">
  <ul id="item_ul">
    <li id="item1" class="item_li">
      a
    </li><!--
    --><li id="item2" class="item_li">
      b
    </li><!--
    --><li id="item3" class="item_li">
      c
    </li>
  </ul>
</div>

0 讨论(0)

热议问题

How I can join with display: inline-block? [duplicate]

How I can join
with display: inline-block? [duplicate]