Pozycjonowanie przycisków w DIV

0

Pisze na własne potrzeby swoja aplikację z przyciskami. Zrobiłem tabelę przycisków za pomocą div (podobno nie zaleca się używania table do takich celów), niektóre przyciski mają mieć etykietą w dwóch liniach niezależnie od szerokości przycisku.

Napisałem próbny kod zawierający 3 rozwiązania i testuję w Chrome i Firefox:

  1. Najbliższe temu, co chciałbym mieć, czyli tabela na div, doczytałem, że do tego celu lepiej użyć button. W Firefox wyświetla poprawnie, natomiast w Chrome przycisk "EE FF" jest przesunięty w dół tak, żeby "EE" był na wysokości "DD".

  2. Rozwiązanie alternatywne na kilka linii w przycisku za pomocą input, w Chrome w ogóle nie działa (tekst jest w jednej linii), a w Firefox tekst jest tak, jak chciałem, ale przyciski "CC" i "DD" są przesunięte w dół.

  3. Na próbę zrobiłem za pomocą button i niezalecanego table i w obu przeglądarkach dostaję oczekiwany efekt wizualny bez żadnego problemu.

W jaki sposób można zapewnić prawidłowe wyświetlanie przycisków w tabeli na div (czyli wersja 1 plus jakieś drobne zmiany)? Jak oba przyciski w rzędzie mają tą samą liczbę linii tekstu, to wyświetlają się prawidłowo. W moim zastosowaniu nie ma znaczenia, czy przyciski będą zrobione za pomocą input czy button.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>

* {
  box-sizing: border-box;
}

body { 
        font: 10pt Arial, sans-serif; 
        height: 100%;
        width: 100%;
        margin: 0px;
}

div {
        padding: 0px;
}


/* DivTable.com */
.divTable
{
	display: table;
	width: 100%;
	height: 100%;
}
.divTableRow
{
	display: table-row;
}
.divTableCell
{
	border: 0px solid #999999;
	display: table-cell;
	padding: 0px;
}
.divTableBody
{
	display: table-row-group;
}

.toolbar
{
        background-color:#000000;
        width:200px;
        height:200px;
        color:white;
        display:block;
}

.tool
{
	width:100%;
	height:100%;
	display:block;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.toolb
{
	width:100%;
	height:100%;
	padding: 0px;
	margin: 0px;
        //white-space: normal;
        white-space: pre-line;
        word-spacing: 1000px;
}


        </style>
    </head>
    <body>
        <div class="toolbar">
            <div class="divTable">
                <div class="divTableBody">
                    <div class="divTableRow">
                        <div class="divTableCell" style="width:50%;height:50%"><button class="tool">AA<br>BB</button></div>
                        <div class="divTableCell" style="width:50%;height:50%"><button class="tool">CC</button></div>
                    </div>
                    <div class="divTableRow">
                        <div class="divTableCell" style="width:50%;height:50%"><button class="tool">DD</button></div>
                        <div class="divTableCell" style="width:50%;height:50%"><button class="tool">EE<br>FF</button></div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="toolbar">
            <div class="divTable">
                <div class="divTableBody">
                    <div class="divTableRow">
                        <div class="divTableCell" style="width:50%;height:50%"><input type="button" class="toolb" value="AA&#x00A;BB"></div>
                        <div class="divTableCell" style="width:50%;height:50%"><input type="button" class="toolb" value="CC"></div>
                    </div>
                    <div class="divTableRow">
                        <div class="divTableCell" style="width:50%;height:50%"><input type="button" class="toolb" value="DD"></div>
                        <div class="divTableCell" style="width:50%;height:50%"><input type="button" class="toolb" value="EE&#13;&#10;FF"></div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="toolbar">
            <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
                <tr height="50%">
                    <td width="50%"><button class="tool">AA<br>BB</button></td>
                    <td width="50%"><button class="tool">CC</button></td>
                </tr>
                <tr height="50%">
                    <td width="50%"><button class="tool">DD</button></td>
                    <td width="50%"><button class="tool">EE<br>FF</button></td>
                </tr>
            </table>
        </div>
    </body>
</html>
0

Przedstaw proszę graficznie, co chciałbyś osiągnąć. Jakiś rysunek w paincie czy coś.

0
.__. napisał(a):

Przedstaw proszę graficznie, co chciałbyś osiągnąć. Jakiś rysunek w paincie czy coś.

Rysunek w załączeniu,

0

Tutaj przykład w aplikacji, zastosowany sposób nr 1 z pierwszego postu. W pliku Efekt3.png jest to, co uzyskuję w Chrome, a w pliku Efekt4.png jest ten sam printscreen podretuszowany w paincie i przedstawia to, co powinno być.

0 
<html>
    <head>
        <style>
			.container {
				display: flex;
				flex-direction: column;
			}

			.row {
				display: inline-flex;
			}

			.button {
				height: 100px;
				width: 100px;
			}
        </style>
    </head>
    <body>
		<div class="container">
			<div class="row">
				<button class="button">AA<br>BB</button>
				<button class="button">CC</button>
			</div>
			<div class="row">
				<button class="button">DD</button>
				<button class="button">EE<br>FF<br>GG</button>
			</div>
		</div>
    </body>
</html>
0

To już to, co potrzebuję, już sam przerobiłem tak, żeby odpowiadał moim potrzebom

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>

            * {
                box-sizing: border-box;
            }

            .container {
                display: flex;
                flex-direction: column;
                width:40px;
                height:600px;
            }

            .row {
                height: 50%;
                display: inline-flex;
            }

            .button {
                height: 100%;
                width: 50%;
            }

        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <button class="button">AA<br>BB</button>
                <button class="button">CC</button>
            </div>
            <div class="row">
                <button class="button">DD</button>
                <button class="button">EE<br>FF<br>GG</button>
            </div>
        </div>
    </body>
</html>

1 użytkowników online, w tym zalogowanych: 0, gości: 1