堆栈内存溢出
  简体   繁体   English

如何将按钮下方对齐并与HTML列表右对齐？

[英]How to align buttons below and right-aligned to a HTML list?

 原文  2015-03-06 18:20:15  6   4    html/ css

问题描述

I have constructed a small grid using an HTML <ul> list and I was planning to align buttons and text below it as I have drawn in the following figure: 我已经使用HTML <ul>列表构建了一个小网格，并且正计划将其下方的按钮和文本对齐，如下图所示：

应该如何

I wanted to have the buttons Select and Cancel below the grid and right-aligned along the right end of the box, while the text S-text would also be straight below but left-aligned (and Other just somewhere to the right, I can do that with absolute positioning). 我想在网格下方有“ Select和“ Cancel ”按钮，并沿着框的右端右对齐，而文本S-text也将在文本框的正下方，但要左对齐（“ Other在右边的某个位置，我可以通过绝对定位来做到这一点）。 However, I just don't know how to do this using HTML/CSS; 但是，我只是不知道如何使用HTML / CSS来做到这一点。 my attempts end up looking like this: 我的尝试最终看起来像这样：

现在怎么样

Can anyone explain to me how this is done? 谁能告诉我这是怎么做的？ This is a very simple example but I need to learn the principle at work here. 这是一个非常简单的示例，但是我需要在这里学习工作原理。 My code is as follows: 我的代码如下：

example.html : example.html ： 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="simple_SE.css">
</head>
<body>

<table id="bigtable">

<tbody>

<ul id="blocks">
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
</ul>

<p id="stext">S-text</p>

<button id="selectbutton" type="button">Select</button>

<button id="otherbutton" type="button">Other</button>

<button id="cancelbutton" type="button">Cancel</button>

</tbody>

</table>

</body>
</html>

simple_SE.css : simple_SE.css ： 

#blocks { 
    list-style-type: none; 
    display: inline-block;
    float: left;
    margin: 0; 
    padding: 0; 
    width: 190px; 
}

#blocks li { 
    margin: 3px 3px 0px 0;
    padding: 1px;
    vertical-align: top;
    float: left;
    width: 30px;
    height: 30px;
    font-size: 4em;
    text-align: center; 
}

#selectbutton {
    float: left;
    position:static;
}

#cancelbutton {
    float: left;
    position:static;
}

#otherbutton {
    position: absolute;
    left: 250px;
    top: 100px;
}

4 个解决方案

解决方案1
 2 已采纳  2015-03-06 18:39:25

Welcome to HTML! 欢迎使用HTML！ Hopefully I can provide a little more current information than the layout book you are using from 1996 that advocated tables. 希望我能提供比您使用的1996年提倡表格的布局书更多的最新信息。

So apparently I can't put everything into this box, you can check out the jsFiddle I've attached to see the full layout. 因此，显然我无法将所有内容放入此框中，您可以查看我所附的jsFiddle以查看完整布局。 Here is the CSS: 这是CSS： 

* {
        box-sizing:border-box;
    }

    .container {
        display:inline-block;
        vertical-align:middle;
        width:185px;
    }

    .block-list {
        margin:0 auto;
        padding:0;
        list-style:none;
    }

    .block {
        display:inline-block;
        width:30px;
        height:30px;
        margin:3px 3px 0 0;
        background-color:grey;
    }

    .button-container {
        text-align:right;
    }

    .button-container:after {
        clear:both;
    }

    .button-container span {
        float:left;
    }

    .other-container {
        text-align:center;
    }

This is far from the best way to do it, and there are some improvements that can be made (like managing the 4px space added to the blocks that are display:inline-block , but this should give you what you're looking for (and not even using jQuery UI). 这远不是最好的方法，并且可以做一些改进（例如管理display:inline-block的块中添加的4px空间display:inline-block ，但这应该可以为您提供所需的东西（甚至不使用jQuery UI）。

Here is a jsFiddle. 这是一个jsFiddle。

解决方案2
 1  2015-03-06 18:30:34

What you have to do is, wrap all buttons that you want to show below your "ul" in a div and wrap "ul" and "button div" in another div forming nested elements. 您要做的是，将要显示在“ ul”下方的所有按钮包装在div中，并将“ ul”和“ button div”包装在另一个div中，形成嵌套元素。 This will ensure div containing buttons will be after your ul. 这将确保包含div的按钮位于您的ul之后。 Then you can style to place the child buttons wherever you want. 然后，您可以设置样式以将子按钮放置在所需的任何位置。 And you dont need ant table element in this case. 在这种情况下，您不需要ant表元素。

Check this code. 检查此代码。

HTML HTML 

<body>
     <div>
        <ul id="blocks">
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
        </ul>
        <div id="buttonDiv">
           <label id="stext">S-text</label>
           <button id="cancelbutton">cancel</button>
           <button id="selectbutton">Select</button>
        </div>
     </div>
     <button id="otherbutton">Other</button>
</body>

CSS CSS 

#blocks { 
    list-style-type: none; 
    display: inline-block;
    margin: 0; 
    padding: 0; 
    width: 190px; 
}

#blocks li { 
    margin: 3px 3px 0px 0;
    padding: 1px;
    vertical-align: top;
    float: left;
    width: 30px;
    height: 30px;
    font-size: 4em;
    text-align: center; 
}
#buttonDiv {
  width : 190px;

}
#stext {
  padding : 10px;
  font-size : 20px;
}
#selectbutton {
    float: right;
    position:static;
}

#cancelbutton {
    float: right;
    position:static;
    margin-right : 8px;
}

#otherbutton {
    position: absolute;
    left: 250px;
    top: 100px;
}

解决方案3
 1  2015-03-06 18:43:01

You don't need to use table. 您不需要使用表格。 I think this would help you: fiddle 我认为这会帮助你： 小提琴 

.pos {position: relative;}
.clear { clear: both; }
#stext { display: inline; float: left; margin: 10px 0 0}
#blocks { 
    list-style-type: none; 
    display: inline-block;
    float: left;
    margin: 0; 
    padding: 0; 
    width: 190px; 
}

#blocks li { 
    margin: 3px 3px 0px 0;
    padding: 1px;
    vertical-align: top;
    float: left;
    width: 30px;
    height: 30px;
    font-size: 4em;
    text-align: center; 
    background: red;
}

#selectbutton {
    float: left;
    position:static;
    margin-top: 10px;
}

#cancelbutton {
    float: left;
    position:static;
    margin-top: 10px;
}

#otherbutton {
    position: absolute;
    left: 250px;
    top: 100px;
}

And HTML: 和HTML： 

<div class="pos">
<ul id="blocks">
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
</ul>
    <div class="clear"></div>
<p id="stext">S-text</p>

<button id="selectbutton" type="button">Select</button>

<button id="otherbutton" type="button">Other</button>

<button id="cancelbutton" type="button">Cancel</button>
</div>

解决方案4
 1  2015-03-06 18:45:35

The key to understanding positioning is to imagine each object as a box, with each element fitting together like a puzzle. 理解定位的关键是将每个对象想象成一个盒子，每个元素像拼图一样拼合在一起。 You do just that with your set of <li> statements. 您可以使用一组<li>语句来做到这一点。 Just do that with the other elements. 只需使用其他元素即可。

盒

Most people do this using <div> tags instead of <table> tags. 大多数人使用<div>标签而不是<table>标签来执行此操作。 If I were re-writing your code I'd wrap the whole thing in a container and then arrange everything inside that container. 如果我要重新编写代码，则将整个内容包装在一个容器中，然后将所有内容安排在该容器中。

See this for more info on fluid layouts. 见这对流动布局的详细信息。 As a lot of other answers have provided the code you need for a quick fix, I'll stick to a more general overview. 由于许多其他答案都提供了快速修复所需的代码，因此，我将坚持更一般的概述。 Lets take the example above. 让我们以上面的示例为例。 

<div id="container">
    <div class="box"><!-- This is the yellow box --></div>
    <div class="box"><!-- This is the green box --></div>
    <div class="box"><!-- This is the purple box --></div>
    <div class="box"><!-- This is the red box --></div>
    <div class="box"><!-- This is the blue box --></div>
</div>

This code sets your structure. 此代码设置您的结构。 Then, in the CSS we can position our elements by setting a width and floating everything. 然后，在CSS中，我们可以通过设置宽度并浮动所有内容来定位元素。 

#container {
    width: 190px;
}
.box {
    float: left;
}

If you apply this to your code and add margin:10px; 如果将此应用于代码并添加margin:10px; to both the #selectbutton and the #cancelbutton you'll have what you want. #selectbutton和#cancelbutton都可以使用。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在右对齐列表中对齐 `list-style-image`？ - How to align `list-style-image` in a right-aligned list? 显示按钮在段落下方右对齐 - Display button right-aligned below paragraph 怎么做 <table> 列右对齐 - How to make <table> column right-aligned HTML元素右对齐到同级居中元素的边缘 - HTML element right-aligned to edge of sibling centered element 右对齐的导航栏 - Right-aligned navigation bar 表格主体将右对齐 - The table body will be right-aligned WordPress：如何添加与图像边缘右对齐的标题 - Wordpress: How to add a caption right-aligned to the edge of the image 如何使用CSS将表格列中的右对齐数字居中？ - How to center right-aligned numbers in table column using CSS? 将 Bootstrap 3 导航栏右对齐，包括搜索框也右对齐 - Align Bootstrap 3 Navbar-right and include search box also right-aligned 为什么我的右对齐文本低于我在 header 中的左对齐文本？ （纯 HTML） - Why is my right-aligned text lower than my left-aligned text in the header? (pure HTML)
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM