GWT标签对齐方式和CSS

Question

I am having some trouble with GWT Labels and html/css.

I have a horizontalPanel, and I am trying to align the 2 labels so that each 1 is on an end of the Horizontal Panel

1) [Label 1      --~500px--      Label 2]

However, it seems that the 500 px is divided up into 250px each for a label, and theres a white space. (First I tried to make it like like this)

2) [Label 1 Label 2 --~500 whitespace px-- ]

but what happens is this

3) [Label 1 -~250 whitespace px- Label 2 -~250px whitespace-- ]

I would like It to be like 2) so then i can set the HorizontalAllignment on the Horizontal Panel to ALIGN_JUSTIFY which would put on one each end. I have no idea how to do it. I tried using display: inline but that doesnt seem to work as I hoped (it makes the border just go around the text but the whitespace is there)

Here is the code I am messing around with .border is just (border: 1px solid Red) so i can visualize how the border and size is calculated

HorizontalPanel p = new HorizontalPanel();

p.setWidth("500px");


//p.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_LEFT);
//p.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_JUSTIFY);
Label l1 = new Label("Label 1");
Label l2 = new Label("Label 2");

l1.addStyleName("border");
l2.addStyleName("border");

p.add(l1);
p.add(l2);

Answer 1

I just threw this together from memory, give it a try and let me know if it works like you expect.

HorizontalPanel p = new HorizontalPanel();

p.setWidth("500px");
p.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_JUSTIFY);

Label l1 = new Label("Label 1");
Label l2 = new Label("Label 2");

l1.addStyleName("border");
l2.addStyleName("border");

p.add(l1);
p.setCellHorizontalAlignment(l1, HasHorizontalAlignment.ALIGN_LEFT);
p.add(l2);
p.setCellHorizontalAlignment(l2, HasHorizontalAlignment.ALIGN_RIGHT);

If that doesn't work, have you tried setting text-align:right; in your css for the second label?