Question

我正在尝试将2个输入文字对齐，这些文字有很棒的图标。

<?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
            xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms.Controls"
            xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
            x:Class="TamarianApp.ImagePage">
        <ContentPage.Content>
            <Grid>
                <StackLayout x:Name="mainView">
                    <ScrollView>
                        <StackLayout>
                            <BoxView Margin="0, -7, 0, 0" HorizontalOptions="FillAndExpand" HeightRequest="1" BackgroundColor="#f1f1f1"></BoxView>
                            <StackLayout x:Name="cameraMenuOption" Padding="10" Orientation="Horizontal" HorizontalOptions="Fill" >
                                <Label Margin="10, 2,0,0" HorizontalOptions="StartAndExpand">Camera</Label>
                                <Label x:Name="camera_label" Margin="10, 2,10,0" FontSize="14" TextColor="#c1c1c1" HorizontalOptions="End"></Label>
                                <Image HorizontalOptions="End" Source="icons/blue/next" WidthRequest="20"></Image>
                            </StackLayout>
                            <BoxView HorizontalOptions="FillAndExpand" HeightRequest="1" BackgroundColor="#f1f1f1"></BoxView>
                            <StackLayout x:Name="libraryMenuOption"  Padding="10" Orientation="Horizontal" HorizontalOptions="Fill" >
                                <Label Margin="10, 2,0,0" HorizontalOptions="StartAndExpand">Library</Label>
                                <Label x:Name="library_label" Margin="10, 2,10,0" FontSize="14" TextColor="#c1c1c1" HorizontalOptions="End"></Label>
                                <Image HorizontalOptions="End" Source="icons/blue/next" WidthRequest="20"></Image>
                            </StackLayout>
                        </StackLayout>
                    </ScrollView>
                    <StackLayout BackgroundColor="#fafafa"  HorizontalOptions="FillAndExpand" >
                        <BoxView HorizontalOptions="FillAndExpand"  HeightRequest="3" BackgroundColor="#f1f1f1"></BoxView>
                    </StackLayout>
                    <StackLayout>
                        <flv:FlowListView FlowColumnCount="3" x:Name="image_gallary">
                            <FlowListView.ItemTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <Image Source="{Binding ImageUri}"></Image>
                                    </Grid>
                                </DataTemplate>
                            </FlowListView.ItemTemplate>
                        </flv:FlowListView>
                    </StackLayout>
                </StackLayout>
                <StackLayout x:Name="picture_view" IsVisible = "false">
                    <Image x:Name="mainImage" VerticalOptions="Fill" HorizontalOptions="Fill"></Image>
                    <ActivityIndicator x:Name="loading_activity" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" IsRunning="false"></ActivityIndicator>
                    <StackLayout x:Name="confirm_button" HorizontalOptions="FillAndExpand" Orientation="Horizontal" Padding="15, 10, 15, 10" VerticalOptions="EndAndExpand"  BackgroundColor="White">
                        <Button Text="Confirm" Clicked="upload_clicked" HorizontalOptions="StartAndExpand" FontSize="18"></Button>
                        <Button Text="Cancel" Clicked="cancel_clicked" HorizontalOptions="End" FontSize="18"></Button>
                    </StackLayout>
                </StackLayout>
            </Grid>
        </ContentPage.Content>
    </ContentPage>

我希望输入左对齐独立于图标的宽度。

Answer 1

你应该让图标成为一个独特的元素，这样它们就可以形成一个固定宽度的块元素。

任一结构应如下：

<span> 
    <i class="fa fa-link fa-lg"></i>
    <input id="product" type="text" placeholder="Product" required/>            
</span>
<br><br>
<span>
    <i class="fa fa-desktop fa-lg"></i>
    <input id="desktop" type="text" placeholder="Desktop" required/>            
</span>

为字体提供固定宽度的图标：

i {
   width: 20px;
 }

Answer 2

目前，您的HTML无效。

请务必使用fa-fw的fontawesome实用程序类对图标应用固定宽度。（文档中提到的固定宽度：http://fontawesome.io/examples/#fixed-width）

尝试以下代码（例如：https://jsfiddle.net/0vwfp6e2/1/）：

<label>
    <i class="fa fa-link fa-lg fa-fw"></i>
    <input id="product" type="text" placeholder="Product" required/>  
</label>

<label>
    <i class="fa fa-desktop fa-lg fa-fw"></i>
    <input id="desktop" type="text" placeholder="Desktop" required/>
</label>

Answer 3

使用fa-fw font-awesome实用程序类。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<span> 
<i class="fa fa-link fa-fw fa-lg"></i>
<input id="product" type="text" placeholder="Product" required/>            
</span>
<br>
<br>
<span> 
<i class="fa fa-desktop fa-fw fa-lg"></i>
<input id="desktop" type="text" placeholder="Desktop" required/>            
</span>

无法左对齐文本输入有很棒的图标靠近它们

3 个答案: