Question

我的html和css是这样的：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Data</title>
        <style type="text/css"> 
            body {  
                font-family: 'Arial';
                font-size: 9px;
                margin-bottom: 100px;
            }
            div.global{
                width: 100%;
                font-size: 12px;
            }
            div.left {
                float: left;
                width: 50%; 
                text-align: center;
            }
            div.right {
                margin-left: 80%;
            }
            div.center {
                margin-left: 35%;
                width: 485px;
                text-align: center;
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <div class="global">
            <div class="left">
                <div style="width: 80mm; margin-left: -15px !important;"> 
                    data.... <br>
                    test....
                </div>
                <hr style="max-width: 80mm; margin-left:0; height:1px; border:none; color:#333;background-color:#333;">
            </div>
            <div class="right">
                <div style="width: 80mm; margin-right: 0 !important"> 
                    <table>
                        <tr style="padding-right:35px">
                            <td>Lamp</td>
                            <td align="right">test 1</td>
                        </tr>
                        <tr>
                            <td>No</td>
                            <td align="right">test 2</td>
                        </tr>
                        <tr>
                            <td>Date</td>
                            <td align="right">test 3</td>
                        </tr>
                    </table>
                </div>
                <hr style="max-width: 80mm; margin-left:0 height:1px; border:none; color:#333;background-color:#333;">

            </div>
        </div>  
        <div class="center">
            data 1 2 3<br>
            data 4 5 6
        </div>          
    </body>
</html>

............................................... ...........

我想要最右边的显示表（class = right中的表）

我试试

...............

<div style="width: 80mm; margin-right: 0 !important">

..............

但是id不起作用

有没有人可以帮助我？

更新

演示是这样的：

https://jsfiddle.net/skfd7215/1/

Answer 1

那不是margin-right所做的。 margin-right只是在元素的右侧给出边距。尝试检查chrome / firefox开发工具中的元素，以查看边距的添加位置。

假设您的global课程跨越了网页的宽度，您可以提供global：

position: relative;

和right：

position: absolute;
right: 0;

https://www.w3schools.com/css/css_positioning.asp了解有关定位的更多信息。

Answer 2

您可以弯曲以正确发送内容

<div style="width: 80mm; display:flex; justify-content: flex-end">

<强> jsFiddle

Answer 3

我很欣赏这是一篇较旧的帖子，我没有对你提供的代码进行测试（所以我不能保证它会在你这个阶段对你的特定场景起作用）但是我正在研究强制解决方案通过margin-right右侧的相对元素也发现了这个小小的美丽：

.element {
  margin-left: auto;
  margin-right: 0;
}

示例代码在这里https://codepen.io/jamie-endeavour/pen/GdrZao

无论哪种方式，我希望你排序。如果您可以分享您的解决方案，那将是很酷的，因为上述答案都没有被接受！

我如何强制保证金权利0？

3 个答案: