堆栈内存溢出
  繁体   English   中英

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

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

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

问题描述

我已经使用HTML <ul>列表构建了一个小网格，并且正计划将其下方的按钮和文本对齐，如下图所示：

应该如何

我想在网格下方有“ Select和“ Cancel ”按钮，并沿着框的右端右对齐，而文本S-text也将在文本框的正下方，但要左对齐（“ Other在右边的某个位置，我可以通过绝对定位来做到这一点）。 但是，我只是不知道如何使用HTML / CSS来做到这一点。 我的尝试最终看起来像这样：

现在怎么样

谁能告诉我这是怎么做的？ 这是一个非常简单的示例，但是我需要在这里学习工作原理。 我的代码如下：

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 ： 

#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

欢迎使用HTML！ 希望我能提供比您使用的1996年提倡表格的布局书更多的最新信息。

因此，显然我无法将所有内容放入此框中，您可以查看我所附的jsFiddle以查看完整布局。 这是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;
    }

这远不是最好的方法，并且可以做一些改进（例如管理display:inline-block的块中添加的4px空间display:inline-block ，但这应该可以为您提供所需的东西（甚至不使用jQuery UI）。

这是一个jsFiddle。

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

您要做的是，将要显示在“ ul”下方的所有按钮包装在div中，并将“ ul”和“ button div”包装在另一个div中，形成嵌套元素。 这将确保包含div的按钮位于您的ul之后。 然后，您可以设置样式以将子按钮放置在所需的任何位置。 在这种情况下，您不需要ant表元素。

检查此代码。

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 

#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

您不需要使用表格。 我认为这会帮助你： 小提琴 

.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;
}

和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

理解定位的关键是将每个对象想象成一个盒子，每个元素像拼图一样拼合在一起。 您可以使用一组<li>语句来做到这一点。 只需使用其他元素即可。

盒

大多数人使用<div>标签而不是<table>标签来执行此操作。 如果我要重新编写代码，则将整个内容包装在一个容器中，然后将所有内容安排在该容器中。

见这对流动布局的详细信息。 由于许多其他答案都提供了快速修复所需的代码，因此，我将坚持更一般的概述。 让我们以上面的示例为例。 

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

此代码设置您的结构。 然后，在CSS中，我们可以通过设置宽度并浮动所有内容来定位元素。 

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

如果将此应用于代码并添加margin:10px; #selectbutton和#cancelbutton都可以使用。

暂无
暂无

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

相关问题 如何在右对齐列表中对齐 `list-style-image`？ 显示按钮在段落下方右对齐 怎么做 <table> 列右对齐 HTML元素右对齐到同级居中元素的边缘 右对齐的导航栏 表格主体将右对齐 WordPress：如何添加与图像边缘右对齐的标题 如何使用CSS将表格列中的右对齐数字居中？ 将 Bootstrap 3 导航栏右对齐，包括搜索框也右对齐 为什么我的右对齐文本低于我在 header 中的左对齐文本？ （纯 HTML）
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM