Aligner deux éléments graphiques à l'horizontal

**mgesche** · 27/03/2014, 12h38

Bonjour,

Je cherche a aligner deux éléments (un <input> et une icone-bouton <a>). J'ai essayé avec data-inline ou avec un FieldContain mais je conserve comme affichage l'input qui prend toute la ligne et le bouton a la ligne suivante. De plus, je ne réussis pas a capter l’événement de click sur le bouton (avec un alert('Test'))

C'est sans doute un problème assez simple mais je sèche un peu la. Est ce que quelqu'un aurais une idée ? J'utilise JQueryMobile 1.4.2

Ex1.html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
		<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
		<script src="Ex1.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
	</head>
	<body>
		<div data-role="page" id="PageItem">
			<div data-role="content">
				<div data-role="fieldcontain">
					<input type="text" name="newItem" id="newItem" value="" />
					<a href="#" id="addItem" data-role="button" data-icon="plus" data-iconpos="notext">Add new item</a>
				</div>
				<input type="text" name="newItem2" id="newItem2" value="" data-inline="true" />
				<a href="#" id="addItem2" data-role="button" data-icon="plus" data-iconpos="notext" data-inline="true">Add new item</a>
			</div>
		</div>
	</body>
</html>

Ex1.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$('document').ready(new function() {
	$('#addItem').click(function(){
		alert('Test');
	});
});

Merci d'avance pour votre aide

bm · 27/03/2014, 14h12

Avec une table :

http://www.w3schools.com/html/html_tables.asp

**mgesche** · 27/03/2014, 14h43

Merci de ta réponse

Je pensais qu'il y avait d'autre moyen mais en tout cas, ca marche (en mettant bien le table width=100% pour prendre la largeur)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<table width=100%>
	<tr>
		<td width=90%><input type="text" name="newItem" id="newItem" value="" /></td>
		<td width=10%><a href="#" id="addItem" data-role="button" data-icon="plus" data-iconpos="notext">Add new item</a></td>
	</tr>
</table>

**Bovino** · 27/03/2014, 15h51

Envoyé par bm

Avec une table

Oh non...

Pourquoi pas des frameset tant qu'on y est...

Cela fait déjà de nombreuses années qu'il est recommandé de ne pas utiliser les tables pour la mise en forme !
Il existe aussi, au passage, des références beaucoup plus sérieuses que W3Schools ! Par exemple MDN...

bm · 27/03/2014, 17h36

Bovino

MDN ?

Quel site ?

http://www.mdn-mines.com/fr/

**Bovino** · 27/03/2014, 17h48

Ce MDN là...

Aligner deux éléments graphiques à l'horizontal [UI Mobile]

jQuery

Vue hybride

Discussions similaires

Partager

Partager