Question

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

第二个问题是：当我想调整页面大小时 - 工具栏会在右侧留下一些空闲空间。 enter image description here

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

enter image description here

这是页面代码

<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>

Demonstration.

Answer 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>

Demonstration.

自动调整jquery工具栏并对齐它

1 个答案: