堆棧內存溢出
  簡體   English   中英

如何垂直對齊不同寬度和線條的 div（選擇），同時將它們與其他（文本）對齊 - HTML 和 CSS

[英]How to align divs (selects) of different widths and lines vertically whilst also aligning them with other (text)- HTML and CSS

 原文  2020-05-28 16:34:47  3   2    html/ jquery/ css/ user-interface

問題描述

所以，我知道這個問題聽起來非常令人困惑，但我有一張圖片來展示我想要實現的目標。 圖片： 在此處輸入圖像描述

我遇到問題的部分是將選擇部分對齊以在同一位置“開始”，以免弄亂。 例如，如果你在屏幕上放一把尺子，它們都會從同一個地方開始。 由於單詞的長度不同，文本看起來很亂，同樣的問題。

我嘗試過使用填充、css 網格等，但我沒有運氣 - 我覺得我不需要添加它，因為它都沒有真正起作用，但如果需要的話我可以。

我的 HTML 如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-  scale=1.0">
<link rel="stylesheet" href="jquery-ui.min.css">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
    <h1>Solve the case!</h1>

    <div class="who-container">
        <h2 class="who">Who &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</h2>
        <select class="who" id="who">
            <option>‘Small’ Paul Romano</option>
            <option>Steven Smith aka The Black Widow</option>
            <option>Ronnie ‘The Face’ Jones</option>
            <option>Joe Sharp</option>
        </select>
    </div>

    <div class="where-container">
        <h2 class="where">Where &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h2>
        <select class="where" id="where">
            <option>Mount Road</option>
            <option>Coronation Street</option>
            <option>Windsor Drive</option>
            <option>Back Street</option>
            <option>Queens Close</option>
            <option>Gladstone Road</option>
            <option>Kings Road</option>
            <option>Devon Road</option>
            <option>The Pines</option>
            <option>Saxon Way</option>
            <option>Alexandra Street</option>
            <option>The Grange</option>
            <option>Gloucester Road</option>
            <option>Larch Close</option>
            <option>Cedar Close</option>
            <option>Orchard Grove</option>
            <option>Robin Close</option>
            <option>Third Avenue</option>
            <option>Crescent Road</option>
            <option>Heath Lane</option>
            <option>Church Way</option>
            <option>South Drive</option>
            <option>Herbert Street</option>
            <option>Bedford Street</option>
            <option>Ash Grove</option>
            <option>St Peter's</option>
            <option>Road Thornton</option>
            <option>Road Avenue</option>
            <option>Road Parkway</option>
            <option>North Street</option>
            <option>Hazel Grove</option>
            <option>Shaftesbury Road</option>
            <option>Oak Tree</option>
            <option>Close Juniper</option>
            <option>Close Heron</option>
            <option>Close St</option>
            <option>Paul's Road</option>
            <option>Meadow Way</option>
            <option>Wordsworth Avenue</option>
            <option>Woodland Way</option>
            <option>Windsor Avenue</option>
            <option>Stanley Street</option>
            <option>The Moorings</option>
            <option>Wellington Street</option>
            <option>Edward Street</option>
            <option>Poplar Drive</option>
            <option>Trinity Close</option>
            <option>Railway Terrace</option>
            <option>Oak Close</option>
            <option>The Fairway</option>
            <option>Hall Street</option>
        </select>
    </div>

    <div class="when-container">
        <h2 class="when">When &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h2>
        <select class="when" id="when">
            <option>00:00 - 00:30</option>
            <option>00:30 - 01:00</option>
            <option>01:00 - 01:30</option>
            <option>01:30 - 02:00</option>
            <option>02:00 - 02:30</option>
            <option>02:30 - 03:00</option>
            <option>03:00 - 03:30</option>
            <option>03:30 - 04:00</option>
            <option>04:00 - 04:30</option>
            <option>04:30 - 05:00</option>
            <option>05:00 - 05:30</option>
            <option>05:30 - 06:00</option>
            <option>06:00 - 06:30</option>
            <option>06:30 - 07:00</option>
            <option>07:00 - 07:30</option>
            <option>07:30 - 08:00</option>
            <option>08:00 - 08:30</option>
            <option>08:30 - 09:00</option>
            <option>09:00 - 09:30</option>
            <option>09:30 - 10:00</option>
            <option>10:00 - 10:30</option>
            <option>10:30 - 11:00</option>
            <option>11:00 - 11:30</option>
            <option>11:30 - 12:00</option>
            <option>12:00 - 12:30</option>
            <option>12:30 - 13:00</option>
            <option>13:00 - 13:30</option>
            <option>13:30 - 14:00</option>
            <option>14:00 - 14:30</option>
            <option>14:30 - 15:00</option>
            <option>15:00 - 15:30</option>
            <option>15:30 - 16:00</option>
            <option>16:00 - 16:30</option>
            <option>16:30 - 17:00</option>
            <option>17:00 - 17:30</option>
            <option>17:30 - 18:00</option>
            <option>18:00 - 18:30</option>
            <option>18:30 - 19:00</option>
            <option>19:00 - 19:30</option>
            <option>19:30 - 20:00</option>
            <option>20:00 - 20:30</option>
            <option>20:30 - 21:00</option>
            <option>21:00 - 21:30</option>
            <option>21:30 - 22:00</option>
            <option>22:00 - 22:30</option>
            <option>22:30 - 23:00</option>
            <option>23:00 - 23:30</option>
            <option>23:30 - 00:00</option>
        </select>
    </div>

    <div class="what-container">
        <h2 class="what">What &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h2>
        <select class="what" id="what">
            <option>Candlestick</option>
            <option>Pipe</option>
            <option>Knife</option>
            <option>Gun</option>
            <option>Baseball Bat</option>
            <option>Spanner</option>
            <option>Hammer</option>
            <option>Rope</option>
            <option>Brick</option>
            <option>Golf Club</option>
        </select>
    </div>

    <div class="date-container">
        <h2 class="date">Date &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h2>
        <input type="text" name="date" id="date">
    </div>

    <button onclick="submit()">Solve</button>

</body>
<script src="external/jquery/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>

<script src="jquery-ui.min.js"></script>
<script>
    $( "#date" ).datepicker();
    $.datepicker.setDefaults({
    dateFormat: 'dd/mm/yy'
    });
    $( "#date" ).datepicker("setDate", new Date(2020,01,01));
</script>
<script src="form-handler.js"></script>
</html>

還有我的 CSS （那不起作用：！！）：

.who-container, .where-container, .when-container, .what-container,     .date-container{
    text-align: left;
}


.who, .where, .when, .what, .date{
    text-align: right;
    display: inline-block;
    padding-right: 20%
}


h2{
    padding-left: 40%;
}

2 個解決方案

解決方案1
 1 已采納  2020-05-28 17:20:10

您需要做的就是以table的形式編寫它們，這樣它就會像您想要的那樣對齊。

您不必為不同的rows使用containers 。

偽代碼

<table>

    <tr>
        <td><h2>Who<h2></td>
        <td><input type="text" name=""></td>
    </tr>

    <tr>
        <td><h2>Where<h2></td>
        <td><input type="text" name=""></td>
    </tr>

    <tr>
        <td><h2>Time<h2></td>
        <td><input type="text" name=""></td>
    </tr>

    <tr>
        <td><h2>Date<h2></td>
        <td><input type="text" name=""></td>
    </tr>

    <tr>
        <td><h2>How<h2></td>
        <td><input type="text" name=""></td>
    </tr>

    <input type="Submit" name=""> <!-- your button -->
</table>

解決方案2
 0  2020-05-28 16:43:14

嘗試將恆定寬度添加到 h2 標簽：

.container > div
{
  display: flex;
  align-items: center;
}

.container > div h2
{
  max-width: 100px;
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 [html5和css3]如何水平和垂直對齊三個不同大小的div，而在它們之間不留任何空間 如何在html和css中垂直對齊div？ 在CSS中將兩個div垂直對齊 在HTML 5中垂直對齊div 在html中垂直對齊div HTML div不垂直對齊 HTML / CSS：為什么我的文字沒有垂直對齊？ 在HTML / CSS下拉菜單中垂直對齊文本 CSS將文本分布在兩行上並垂直對齊 垂直對齊div和文本
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM