Question

我的div下拉列表中有三个元素，输入日期和按钮都在div上，我希望它们全部在同一行，而不是在彼此之下

<div id="cont">
  Status :
  <select id="dropdown">
    <option value="Approved">Approved</option>
    <option value="Rejected">Rejected</option>
    <option value="Pending">Pending</option>
    <option value="Error">Error</option>
  </select>
  <!-- Date Picker -->
  <p>Date:
    <input type="text" id="datepicker">
  </p>
  <button type="submit" id="searchBtn" value="">Search</button>
</div>

Answer 1

您可以将display: inline-block属性添加到div。这将使它们与内容一起呈现，但它们保留了它们的块属性，因此您仍然可以设置它们的宽度和高度。

示例：

.inline {
  display: inline-block;
  width: 50px;
  height: 20px;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}

#blue {
  background-color: blue;
}

<div class="inline" id="red"></div>
<div class="inline" id="blue"></div>
<div class="inline" id="green"></div>

我最喜欢的有关该主题的教程网站：http://learnlayout.com/inline-block.html

这可以用于支持display属性的每个元素。默认情况下，某些元素甚至设置为此值，例如span元素。

Answer 2

将CSS与display: inline-block

一起使用

＆＃13;

.inline {
  display: inline-block;
}

＆＃13;

<div id="cont">
  Status:
  <select id="dropdown" class="inline">
    <option value="Approved">Approved</option>
    <option value="Rejected">Rejected</option>
    <option value="Pending">Pending</option>
    <option value="Error">Error</option>
  </select>
  <!-- Date Picker -->
  <p class="inline">Date:
    <input type="text" id="datepicker">
  </p>
  <button type="submit" id="searchBtn" value="" class="inline">Search</button>
</div>

＆＃13;

虽然上述方法有效，但最好将特定元素放在span标记中。像这样......

＆＃13;

.inline {
  display: inline-block;
}

＆＃13;

<div id="cont">
  <span class="inline">Status:
    <select id="dropdown">
      <option value="Approved">Approved</option>
      <option value="Rejected">Rejected</option>
      <option value="Pending">Pending</option>
      <option value="Error">Error</option>
    </select>
  </span>
  <!-- Date Picker -->
  <span class="inline">
    <p>Date: <input type="text" id="datepicker"></p>
  </span>
  <span class="inline">
    <button type="submit" id="searchBtn" value="">Search</button>
  </span>
</div>

＆＃13;

Answer 3

将每个包装在div中并显示：inline-block。

Answer 4

https://jsfiddle.net/v9qxobaf/

class VideoAdapter extends ArrayAdapter<Videos> {

    ArrayList<Videos> videoslist;
    LayoutInflater vi;
    int Resource;
    ViewHolder holder;


    public VideoAdapter(Context context, int resource, ArrayList<Videos> objects) {
        super(context, resource, objects);
        vi = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        Resource = resource;
        videoslist = objects;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View v = convertView;
        if (v == null) {

            //holder = new ViewHolder();
            v = vi.inflate(R.layout.teste, parent, false);
            holder = new ViewHolder();

            holder.title = (TextView) v.findViewById(R.id.tvName);
            holder.description = (TextView) v.findViewById(R.id.tvDescriptionn);
            holder.youtube_embed = (TextView) v.findViewById(R.id.tvDateOfBirth);

            YouTubePlayerView youtube = (YouTubePlayerView) v.findViewById(R.id.ivImage);
            youtube.setTag(videoslist.get(position).getLink_to_youtube());
            youtube.initialize(DeveloperKey.DEVELOPER_KEY, (YouTubePlayer.OnInitializedListener) this);



            v.setTag(holder);

        } else {
            holder = (ViewHolder) v.getTag();
        }

        holder.title.setText(videoslist.get(position).getTitle());
        holder.description.setText(videoslist.get(position).getDescription());
        holder.youtube_embed.setText(videoslist.get(position).getLink_to_youtube());
        //holder.link_to_youtube.initialize(youtube.API_KEY, (YouTubePlayer.OnInitializedListener) VideoAdapter.this);


        return v;
    }

    public static final class ViewHolder extends Fragment {

        public static final String API_KEY = "AIzaSyDveKkSzopPSk7ck4ZDbR9YGBe4Mm35DYY";

        public ImageView imageview;
        public TextView title;
        public TextView description;
        public TextView youtube_embed;


    }

}

在一行中显示div元素

4 个答案: