如何使用CSS或Bootstrap为元素设置绝对边距？

作者: star
发布时间: 2024-12-20 02:48:52 (2月前)
转自：

4 条回复

0#
回复此人
机器设备维修 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是一个简单易用的解决方案： </p> <pre> <code> .before-table { min-width: 250px; display: inline-block; } <p style="display: inline-block;"> <div class="before-table">Something BEFORE the table</div> <table style="display: inline-block;"> <thead> <tr> <th>header</th> </tr> </thead> <tbody> <tr> <td>data</td> </tr> </tbody> </table> <span>Something AFTER the table</span> </p> </code> </pre> </DIV>

编辑
1#
回复此人
绵绵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 要设置绝对位置，您可以使用 <code> position: absolute </code> 在你想要定位的元素上。它将定位在它的第一个非静态父级的坐标（0,0）（左上角）。（默认情况下，每个元素的位置都设置为static，直到您将其显式设置为其他位置）。这意味着你还需要为父母分配一个职位（ <code> p </code> 我是你的情况）所以它会覆盖默认值。就像是 <code> position: relative </code> 在父母应该做的工作。 </p> <P> 之后，您可以分别使用“顶部，右侧，底部，左侧”CSS属性从父级的顶部/右侧/底部/左侧边框设置自定义位置。 </p> <pre> <code> p { position: relative; } table { position: absolute; left: 150px; // or whatever distance works best } </code> </pre> <P> 像这样的东西，或它的等效内联版本应该这样做。 </p> </DIV>

编辑
2#
回复此人
樱花弄๑•ั็•็ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 将其包裹在表格结构中。这可以使用div的样式表来完成。通过这种方式，您可以使其响应。 </p> <P> ！不要再将其他块级元素放在p元素中 </p> <P> 看到： <a href="https://stackoverflow.com/questions/10086912/why-is-table-not-allowed-inside-p#answer-10087069"> 为什么＆lt; table＆gt;内部不允许＆lt; p＆gt; </A> </p> <P> 以下是您需要的HTML： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> .table{ display: table; widht: 100%; } .row { display: table-row; } .cell{ display: table-cell; padding: 0 7.5px; } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <div class='table'> <div class='row'> <div class='cell'> Something BEFORE the table </div> <div class='cell'> <table> <thead> <tr> <th>header</th> </tr> </thead> <tbody> <tr> <td>data</td> </tr> </tbody> </table> </div> <div class='cell'> Something AFTER the table </div> </div> <div class='row'> <div class='cell'> Something LONGGGGGG BEFORE the table </div> <div class='cell'> <table> <thead> <tr> <th>header</th> </tr> </thead> <tbody> <tr> <td>data</td> </tr> </tbody> </table> </div> <div class='cell'> Something AFTER the table </div> </div> </div> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑

登录后才能参与评论