Question

我在<div>中包含的网页顶部有一个链接列表。我想在此<hr>上方和下方使用水平<div>行，以便在视觉上将链接与页面的其余部分分开。简化示例：

<hr>
<div style="float:left; width:100%">
    <div style="float:left; margin-right:20px">
      <ul>
        <li><a href="/link1">Link1</a></li>
        <li><a href="/link2">Link2</a></li>
      </ul>
    </div>
    <div style="float:left; margin-right:20px">
      <ul>
        <li><a href="/link3">Link3</a></li>
        <li><a href="/link4">Link4</a></li>
      </ul>
    </div>
</div>
<hr>

我正在使用bootstrap来完善页面。如果没有引导程序，<hr>的行为与预期一致，出现在链接部分的上方和下方。但是，当我使用bootstrap时，两条水平线都出现在链接部分上方。

我不知所措。我不想编辑bootstrap代码。我是否可以使用内联css来修复这个奇怪的位置？

Answer 1

因为浮动将元素从流中取出...要么你可以清除浮点值overflow:hidden，要么在父div中应用floats ...

那么如果您使用的是 bootstrap4 ，那么为什么要使用d-flex ...只需在父div上使用<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <body> <h3 style="background-color: lightgray; height: 40px; padding: 2px"> Ye old title </h3> <hr> <div class="d-flex"> <ul> <li><a href="/go/entry">Race Entry</a></li> <li><a href="/go">Start</a></li> <li><a href="/go/transfer">Position Transfer</a></li> <li><a href="/contracts">Contracts</a></li> </ul> <ul> <li><a href="/statement">Statements</a></li> <li><a href="/position">Race Position</a></li> <li><a href="/firm">Advertising Firm</a></li> </ul> <ul> <li><a href="/report1">Report1</a></li> <li><a href="/report2">Report2</a></li> </ul> <ul> <li><a href="/settleit">Settle it!</a></li> <li><a href="/upload">Upload</a></li> <li><a href="/search">Search</a></li> </ul> </div> <hr> </body>类

DECLARE @state int = 0

SELECT *
FROM employee e
LEFT JOIN employee_process ep ON ep.employee_id = e.employee_id
--this below is what I want to achieve (but obviously this is not correct)
WHERE CASE WHEN @state = 0 THEN ep.employee_id IS NULL ELSE ep.employee_id IS NOT NULL

Answer 2

“我可以提供内联css来修复这个奇怪的位置吗？”

这是因为花车。只需清除上一个<hr> ..

即可

<hr style="clear:both;">

https://jsfiddle.net/s9L0Lf9b/

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<body>
<h3 style="background-color: lightgray; height: 40px; padding: 2px">
   Ye old title
</h3>
<hr>
  <div style="float:left; width:100%;">
    <div style="float:left; margin-right:20px">
      <ul>
        <li><a href="/go/entry">Race Entry</a></li>
        <li><a href="/go">Start</a></li>
        <li><a href="/go/transfer">Position Transfer</a></li>
        <li><a href="/contracts">Contracts</a></li>
      </ul>
    </div>
    <div style="float:left; margin-right:20px">
      <ul>
        <li><a href="/statement">Statements</a></li>
        <li><a href="/position">Race Position</a></li>
        <li><a href="/firm">Advertising Firm</a></li>
      </ul>
    </div>
    <div style="float:left; margin-right:20px">
      <ul>
        <li><a href="/report1">Report1</a></li>
        <li><a href="/report2">Report2</a></li>
      </ul>
    </div>
    <div style="float:left; margin-right:20px">
      <ul>
        <li><a href="/settleit">Settle it!</a></li>
        <li><a href="/upload">Upload</a></li>
        <li><a href="/search">Search</a></li>
      </ul>
    </div>
  </div>
<hr style="clear:both;">
  </body>

“float CSS属性指定应该从中获取元素正常流动并沿其左侧或右侧放置容器，其中文本和内联元素将环绕它。“__ from MDN posted on a related question

P.S。 - 没有必要使用Bootstrap 4浮点数。

Bootstrap位置<hr />以奇怪的方式排列

2 个答案: