0

我有一个带有 3 个按钮的简单工具栏（将来会有更多按钮。按钮上的文字无关紧要）。第一个问题是：我设置margin-left和margin-right设置工具栏like in the center of page。如何在没有的情况下在页面中间（水平）设置工具栏margin-left/margin-right？ 在此处输入图像描述

第二个问题是：当我想调整页面大小时 - 工具栏在右侧留下了一些可用空间。在此处输入图像描述

如何使工具栏看起来像这样？

在此处输入图像描述

这是页面的代码

<html>
<head>
<meta charset="utf-8">
<title>Hotel reservation</title>
<link rel="stylesheet" href="jquery-ui-themes-1.10.3/themes/ui-darkness/jquery-ui.css" />
<script src="jquery-ui-1.10.3/jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<style>
#toolbar {
    padding: 5px;
    display: inline-block;
    margin-left: 20%;
    margin-right: 15%;
}
</style>
<script>
$(function() {
    $( "#item1" ).button();
    $( "#item2" ).button();
    $( "#item3" ).button();
    $( "#toolbar").autosize();
});
</script>
</head>
<body>
<div id="toolbar" class="ui-widget-header ui-corner-all ui-widget-content">
    <input style="font-family: times new roman; type="button" id="item1" value="Общая информация"/>
    <input style="font-family: times new roman; type="button" id="item2" value="Забронировать номер"/>
    <input style="font-family: times new roman; type="button" id="item3" value="О нас"/>
</div>
</body>
</html>

示范。

4

1 回答 1

1

所以第一件事就是第一。只是为您修复了一个错误，您没有在输入中关闭样式标签。其次，你能做一些涉及在工具栏周围放置一个容器并使文本居中的事情吗？

<html>
<head>
    <meta charset="utf-8">
    <title>Hotel reservation</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <style>
        /* Add Container */
        .container{
            width:100%;
            text-align:center;
        }
        #toolbar {
            padding: 5px;
            margin:0 auto;
            display:inline-block;
        }
        /** Could even use media queries to change the width
            of the buttons after a certain breaking point like below: **/
        @media (max-width: 580px) {
            #toolbar input[type=button]
            {
                width:100%;
            }
        }
    </style>
    <script>
        $(function() {
            $( "#item1" ).button();
            $( "#item2" ).button();
            $( "#item3" ).button();
            $( "#toolbar").autosize();
        });
    </script>
</head>
<body>
    <div class="container">
        <div id="toolbar" class="ui-widget-header ui-corner-all ui-widget-content">
            <input style="font-family: times new roman;" type="button" id="item1" value="Общая информация" />
            <input style="font-family: times new roman;" type="button" id="item2" value="Забронировать номер"/>
            <input style="font-family: times new roman;" type="button" id="item3" value="О нас"/>
        </div>
    </div>
</body>
</html>

示范。

于 2013-07-20T22:47:53.800 回答