堆棧內存溢出
  簡體   English   中英

如何將按鈕下方對齊並與HTML列表右對齊？

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

 原文  2015-03-06 18:20:15  9   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