nicht angemeldet
hallo
Ich habe jetzt folgenden Code, der für meinen Fall funktionieren könnte:
Als besonderes Element gibt es
width:calc(99vw / 4 );
4 steht hier für die Anzahl der Flexbox-Children. Da würde ich noch gerne eine --nrOfChildren:4; einsetzen (mit JS manipulieren)
funzen tuts nur im FF. Anforderung ist moderne Desktop-Browser (ist für einen Editor)
Vielleicht willst du einen Code-Pen draus machen?
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="description" lang="de" content="Optional: Titel">
<meta name="date" content="2018-10-31">
<meta name="last-modified" content="2018-10-31">
<title>Optional: Titel</title>
<noscript><link rel="stylesheet" href="../css/nojs.css"></noscript>
<style>
*{
margin:0; box-sizing:border-box;
line-height:1.6;
}
#el547 {
display:flex; flex-flow:row; background:#fff;
width:100vw;
}
#el547 p {
flex:1 2 auto;
display:flex;
margin:0;
width:calc(99vw / 4 );
white-space:nowrap;
}
#el547 p button {
padding:0; border:0; background:#fff;
}
#el547 p button:nth-child(2n) {
width:2em;
color:red;
border-right:0.1em solid #666;
}
#el547 p button:nth-child(2n+1) {
text-overflow:ellipsis;
overflow:hidden;
min-width:5em;
direction:rtl;
flex:1 1 auto;
}
</style>
</head>
<body>
<h1>Beispiel CSS: Tab-Menu Control Leiste</h1>
<p>Besondere Anforderung: overflow:ellipsis links statt rechts.</p>
<div id="el547">
<p><button>new.html</button><button>x</button</p>
<p><button>http://localhost/new_2018-10-31.html</button><button>x</button</p>
<p><button>http://localhost/new_2018-10-32.html</button><button>x</button</p>
<p><button>http://localhost/new_2018-10-33.html</button><button>x</button</p>
</div>
</body>
</html>
Gunnar Bittersmann
Matthias Apsel
marctrix