如何在水平方向HTML / CSS中设置选择框的选项

时间:2018-01-12 10:29:39

标签: html css

所以,如果问题不清楚,here我想要的草图。我找不到关于这个问题的类似问题,所以这就是我要问的原因。

我希望它尽可能简单,只有css。

<div class="myselectbox">My Selectbox
  <select class="myselect_class" id="myselect_id">
    <option>OPT1</option>
    <option>OPT2</option>
    <option>OPT3</option>
    <option>OPT4</option>
  </select>
</div>

提前致谢

2 个答案:

答案 0 :(得分:0)

你只需要在css下输入你的显示设置。由于默认显示是块部分。 所以你需要做的CSS代码更改如下:

01-12 15:59:16.374 14990-14990/com.example.slowmotiondemo E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.example.slowmotiondemo, PID: 14990
    java.lang.UnsatisfiedLinkError: org.bytedeco.javacpp.avutil
        at java.lang.Class.classForName(Native Method)
        at java.lang.Class.forName(Class.java:324)
        at org.bytedeco.javacpp.Loader.load(Loader.java:585)
        at org.bytedeco.javacpp.Loader.load(Loader.java:530)
        at org.bytedeco.javacpp.avformat$AVFormatContext.<clinit>(avformat.java:2819)
        at org.bytedeco.javacv.FFmpegFrameGrabber.startUnsafe(FFmpegFrameGrabber.java:468)
        at org.bytedeco.javacv.FFmpegFrameGrabber.start(FFmpegFrameGrabber.java:462)
        at com.example.slowmotiondemo.ActivityCutMergeVideo.prepareMediaForOreantation(ActivityCutMergeVideo.java:687)
        at com.example.slowmotiondemo.ActivityCutMergeVideo.onCreate(ActivityCutMergeVideo.java:507)
        at android.app.Activity.performCreate(Activity.java:6904)
        at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1136)
        at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3266)
        at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3415)
        at android.app.ActivityThread.access$1100(ActivityThread.java:229)
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1821)
        at android.os.Handler.dispatchMessage(Handler.java:102)
        at android.os.Looper.loop(Looper.java:148)
        at android.app.ActivityThread.main(ActivityThread.java:7331)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1230)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1120)

答案 1 :(得分:0)

试试这个:

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 260px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1float;}
.dropdown-content a {float: left;}

.dropdown:hover .dropdown-content {
    display: inline;
	
}
a{
float: left;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
<div class="dropdown" style="float:left;">
  <button class="dropbtn">Select</button>
  <div class="dropdown-content" style="left:0;">
  <div>
   <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
   
  </div>
</div>

您无法使用<select>执行此操作,您需要执行自定义下拉列表