nicht angemeldet
Automatische Abstände von Inputs und Selects
Hallo,
Als CSS-Anfänger stehe ich immer wieder vor neuen Rätseln:
In einem Div stehen mehrere Input- und Select-Felder nebeneinander, aber immer mit gewissem Abstand, obwohl ich ihnen null margin, kaum border und null padding gebe.
Erst wenn sie margin-right: -0.45em; erhalten, stehen sie nahtlos nebeneinander, aber dafür ragt dann das Feld rechts außen über den Rand des Container-Div hinaus.
Ist das denn normal bzw. was soll das? Das macht z.B. die Berechnung der Div-Breite nicht gerade einfach.
Hier mein Code zur Demo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS-Test</title>
<style type="text/css">[code lang=css]
body {
background: white;
color: black;
margin: 0;
padding: 1em;
font-size: 100.01%;
font-family: verdana, arial, sans-serif;
}
div#Area {
height: 1.7em;
margin-bottom: 0.5em;
border: 1px dashed silver;
padding: 0.5em;
}
div#Area * input {margin-right: -0.45em;} /* => Abstand 0 */
div#Area * select {margin-right: -0.45em;} /* => Abstand 0 */
div#Ui {
float: left;
padding-bottom: 0.5em;
border: 1px dashed red;
}
~~~</style>
</head>
<body>
<div id="Area">
<div id="Ui">
<input id="InpName" type="text" value="Input" maxlength="12">
<input id="BtnOpen" type="button" value="\*">
<select id="SelName"><option>Option</option></select>
<input id="BtnClose" type="button" value="x">
<input id="BtnClear" type="button" value="xx">
</div>
</div>
</body>
</html>[/code]
Mache ich denn irgend etwas falsch?
Gruß, Don P
-
Hi,
In einem Div stehen mehrere Input- und Select-Felder nebeneinander, aber immer mit gewissem Abstand, obwohl ich ihnen null margin, kaum border und null padding gebe.
So, wie zum Beispiel auch die Woerter in deinen oder meinen Saetzen.
Ist das denn normal bzw. was soll das?
WennichalleWoerteraneinanderschreibenwollenwuerde,wuerdeichdasauchtun.
MfG ChrisB
-
Hallo,
WennichalleWoerteraneinanderschreibenwollenwuerde,wuerdeichdasauchtun.
Wow, danke! War schon der Verzweiflung nahe. Wäre nicht so schnell auf die Idee gekommen, dass der Whitespace dazwischen auch interpretiert wird. Das gilt für den Whitespace zwischen meinem Div#Area und dem Div#Ui schließlich nicht.
So ganz logisch erscheint mir das wirklich nicht und verunstaltet den HTML-Quelltext :-(.
Naja, jedenfalls weiß ich jetzt Bescheid.
Gruß, Don P
-
Hi,
Wäre nicht so schnell auf die Idee gekommen, dass der Whitespace dazwischen auch interpretiert wird. Das gilt für den Whitespace zwischen meinem Div#Area und dem Div#Ui schließlich nicht.
So ganz logisch erscheint mir das wirklich nicht
Input und Select sind (replaced) inline elements, stehen im normalen Fliesstext - und in dem "muss" whitespace entsprechend beruecksichtigt werden, ebenweilwirsonstbeisolchunleserlichemQuatschauskommen ...
und verunstaltet den HTML-Quelltext :-(.
Ansichtssache.
Du willst explizit die Felder nahtlos aneinander stehen haben - also ist es doch konsquent, wenn das auch im Quelltext so drinsteht.
(Damit das keine monsterlangen Zeilen werden, kannst du zur Not ja Umbrueche *in* den Tags einfuegen - bspw. zwischen einem <input und type="text", da kannst du meterweise Zeilenumbrueche unterbringen, wenn's dem Wohlbefinden dienlich sein sollte - nur die spitzen Klammern der Tags musst du halt direkt aneinander notieren.)MfG ChrisB
-
Hallo,
Input und Select sind (replaced) inline elements, stehen im normalen Fliesstext - und in dem "muss" whitespace entsprechend beruecksichtigt werden, ebenweilwirsonstbeisolchunleserlichemQuatschauskommen ...
Stimmt eigentlich, gefällt mir trotzdem nicht. Davor und dahinter wird der Whitespace dann wieder ignoriert. Das ist doch irgendwie inkonsequent.
und verunstaltet den HTML-Quelltext :-(.
Ansichtssache.
Ist halt meine Ansicht. Ich mache es jetzt so:
<fieldset id="Ui"> <input id="InpName" type="text" value="" maxlength="12" ><input id="BtnOpen" type="button" value="*" ><select id="SelName"><option>Option</option></select ><input id="BtnClose" type="button" value="x" ><input id="BtnClear" type="button" value="xx"> </fieldset>Sieht besch...eiden gut aus, aber funktioniert.
Du willst explizit die Felder nahtlos aneinander stehen haben
Nicht wirklich, aber ich will solche Abstände per CSS zuverlässig steuern können und nicht in Abhängigkeit von der Schriftart erraten müssen.
Gruß, Don P
-
[latex]Mae govannen![/latex]
Ist halt meine Ansicht. Ich mache es jetzt so:
<fieldset id="Ui">
<input id="InpName" type="text" value="" maxlength="12"
><input id="BtnOpen" type="button" value="*"><select id="SelName"><option>Option</option></select
><input id="BtnClose" type="button" value="x"
><input id="BtnClear" type="button" value="xx"></fieldset>
> > Sieht besch...eiden gut aus, aber funktioniert. Ich persönlich finde in Sachen Codelesbarkeit/verständlichkeit das Auseinanderreißen von Elementen auf mehrere Zeilen ja ziemlich suboptimal. Ich hab in verschiedenen Quältexten auch schon soetwas gesehen: ~~~html <input id="InpName" type="text" value="" maxlength="12"><!-- --><input id="BtnOpen" type="button" value="*"><!-- --><...>Ist zwar auch irgendwie nicht das wahre und braucht zusätzlichen Code, dafür ist aber wenigstens das Element in der Zeile abgeschlossen, in der es auch beginnt.
Cü,
Kai
--
Run for the sun, little one You're an outlaw once again
Time to change, Superman He'll be with us while he can
In the land of make believe
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|]-
Hallo,
Ich persönlich finde in Sachen Codelesbarkeit/verständlichkeit das Auseinanderreißen von Elementen auf mehrere Zeilen ja ziemlich suboptimal.
Ich auch, aber meines Wissens ist es in SGML die einzige Möglichkeit gefahrlos Whitespace einzusetzen. Mir begegnet immer wieder maschinengeschriebenes XML, bei dem vor jedem ">" ein Zeilenumbruch steht. Sieht nicht schön aus, ist aber sicher.
Ich hab in verschiedenen Quältexten auch schon so etwas gesehen:
<input id="InpName" type="text" value="" maxlength="12"><!--
--><input id="BtnOpen" type="button" value="*"><!--
--><...>Danke für den Tipp. Das ist eine Überlegung wert. Wenn man schon dabei ist, kann das ganze noch verständlich machen mit etwas wie: ~~~html <!-- Txt --><input id="InpName" type="text" value="" maxlength="12"><!-- no space --><input id="BtnOpen" type="button" value="*"><!-- no space --><...>Gruß, Don P
-
-
-
-
-
-
Hier mein Code zur Demo:
verdammte divsuppe - warum nicht formulare und fieldsets (die dafür gedacht sind, formulare zu gliedern) verwenden?
<form> <fieldset> <input /> <input /> <select /> </fieldset> </form>dein problem hast du zwar schon gelöst, aber der code ist dennoch verbesserungswürdig
-
Hallo,
verdammte divsuppe - warum nicht formulare und fieldsets (die dafür gedacht sind, formulare zu gliedern) verwenden?
Naja, es ist kein Formular zum Abschicken. Aber Inputs und Selects brauche ich trotzdem.
<form>
<fieldset>
<input />
<input />
<select />
</fieldset>
</form>> > dein problem hast du zwar schon gelöst, aber der code ist dennoch verbesserungswürdig Danke, bin für jeden Verbesserungsvorschlag dankbar. Kommt denn im fieldset der Whitespace nicht zum Tragen? Das wäre super. Werde ich gleich mal ausprobieren. Gruß, Don P-
Hallo,
verdammte divsuppe - warum nicht formulare und fieldsets (die dafür gedacht sind, formulare zu gliedern) verwenden?
Naja, es ist kein Formular zum Abschicken. Aber Inputs und Selects brauche ich trotzdem.
<form>
<fieldset>
<input />
<input />
<select />
</fieldset>
</form>> > > > dein problem hast du zwar schon gelöst, aber der code ist dennoch verbesserungswürdig > > Danke, bin für jeden Verbesserungsvorschlag dankbar. Kommt denn im fieldset der Whitespace nicht zum Tragen? Das wäre super. Werde ich gleich mal ausprobieren. nein, ob du fieldset div oder sonstwas nimmst ist völlig egal - nur wenn du schon inputs gruppierst, nimm ein fieldset - auch wenns kein formular ist ;)
-
-