Question

以上是我的表格：

我希望标签类别与“选择类别”下拉列表水平对齐。与其他表格项目相同。

这是我的CSS：

.labelContainer {
  clear: both;
  float: left;
  width: 200px;

}

.inputContainer {
  clear:left;
  float: left;
  width: 200px;
}

我的一些HTML：

<div class="labelContainer">
            <label for="Date">Date</label>
        </div>

        <div class="inputContainer">
        <input type="text" id="datepicker" name="datepicker"/>
        </div>

Answer 1

从.inputContainer类CSS中删除clear：left：左

CSS：

public class AboutPage extends Fragment {
    public AboutPage() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view =  inflater.inflate(R.layout.fragment_about_page, container, false);
        Button contactButton = (Button) view.findViewById(R.id.contact_button);
        contactButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(Intent.ACTION_SENDTO);
                intent.setData(Uri.parse("mailto:email@gmail.com"));
                intent.putExtra(intent.EXTRA_SUBJECT, "Primus Suggestion or Issue");
                intent.setType("plain/text");
                if (intent.resolveActivity(getActivity().getPackageManager()) != null) {
                    getActivity().startActivity(Intent.createChooser(intent, "Send Email using:"));
                } else {
                        Toast.makeText(getActivity(), "You don't have any email apps to contact us.", Toast.LENGTH_SHORT).show();
                }
            }
        });

        return view;
    }
}

Answer 2

.inputContainer 上的清除：左会阻止两个div彼此相邻。

HTML：

<div class="labelContainer">
    <label for="Date">Date</label>
</div>
<div class="inputContainer">
    <input type="text" id="datepicker" name="datepicker"/>
</div>
<div class='clearfix'></div>

CSS：

.labelContainer {
  float: left;
  width: 200px;
}

.inputContainer {
  float: left;
  width: 200px;
}

.clearfix {
  clear: both;
}

您可以在此处查看：jsfiddle。

Answer 3

使用定位来定位您的选择菜单

.inputContainer{
        position:relative;
        bottom:10px;
        left:20px;
}

如何将标签和输入对齐在一行？

3 个答案: