Question

我正在创建一个界面，我无法弄清楚为什么显示的左侧名称之间存在巨大差距。

我没有为任何html元素设置任何填充或任何边距。我需要显示的三个块在指定的高度内并且不超过其内容。我究竟做错了什么？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <style>
            .jumbotron {
                padding: 0.5em 0.6em;
                h1 {
                    font-size: 2em;
                }
                p {
                    font-size: 1.2em;
                    .btn {
                        padding: 0.5em;
                    }
                }
            }

            .menuItem {
                background-color: #e0e0ff;
                width:295px;
                height:183px;
                border:2px solid #000;
            }

            .fontSize {
                color: #00000;
                font-family: Georgia, Times, serif; 
                font-size: 200%; 
                text-align: center;
            }
            .menuItem:hover { -moz-box-shadow: 0 0 50px #ccc; 
                              -webkit-box-shadow: 0 0 50px #ccc; box-shadow: 0 0 50px #ccc; 
            } 
        </style>

    </head>

    <body>
        <div class="container">
            <div class="jumbotron">
                <h2 style="text-align:center;">Head And Neck Therapy </h2>
            </div>

            <div style="width:1140px; height: 550px;border:2px solid #000;">
                <div style="width:300px; height: 550px;display: inline-block"> 
                        <a href="#"> <div class="menuItem fontSize"> Scan Images </div> </a>
                        <a href="#"><div class="menuItem fontSize"> Patient Details </div> </a>
                        <a href="#"><div class="menuItem fontSize"> Confirmation  </div> </a>
                    </div>
                <div style="width:832px; height: 548px;display: inline-block"> </div>
            </div>
        </div>
    </body>

Answer 1

使用修改后的代码查看以下URL。它可能是你正在寻找的东西。 http://liveweave.com/Ci6YPG

Answer 2

尝试将菜单项包装在浮动左侧div：

中

    <div style="width:1140px; height: 550px;border:2px solid #000; background-color: blue">
        <div style="float: left">
            <div style="width:300px; height: 550px;display: inline-block; background-color: red"> 
                <a href="#"> <div class="menuItem fontSize"> Scan Images </div> </a>
                <a href="#"><div class="menuItem fontSize"> Patient Details </div> </a>
                <a href="#"><div class="menuItem fontSize"> Confirmation  </div> </a>
            </div>
        </div>

        <div style="width:832px; height: 548px;display: inline-block; background-color: green">

        </div>
    </div>

Answer 3

您已将menuItem个元素设置为display: inline-block。这是基于你没有设置的line-height定位它们，最终会是20px。尝试使用display: block或将行高设置为容器的高度。

Answer 4

尝试删除.menuItem高度和div style =“width：1140px; height：550px;”。您将删除空格，然后您可以给出宽度和高度。

div定位 - 无法在现有div中定位多个div

4 个答案: