Question

我想要这样的布局：

对于我使用下面的代码。但右上角的选择菜单选项无法正常工作。此选择选项未在右侧对齐，并且select元素非常小。我在这里有一个例子https://jsfiddle.net/uhnz45nm/，其背景更清晰。

你知道问题出在哪里吗？如何将这个选择选项菜单放在右边，具有一定的宽度，文本在左边，图标字体在右边的选择元素中？

HTML：

    <div class="container background-light m_top m_bottom">
      <div class="test div">
        <div class="menu">
          <ul class="menu-items">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
          </ul>

            <div class="menu-select">
              <span>Order by</span>
              <i class="fa fa-caret-down" aria-hidden="true"></i>
              <form>
              <select>
                <option selected>Item 1</option>
              </select>
               </form>
            </div>

    </div>
    <div class="side">sidebar</div>
    <div class="main">main</div>
  </div>
</div>

的CSS：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  outline: 0;
  border-radius: 0;
}

ul{
  list-style:none;
}

/*.test{display:flex;}*/


input,
select,
textarea,
button {
  padding: 15px;
  width: 100%;
}

select,
input,
button {
  border: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.container {
  float: left;
  width: 100%;
}

.div {
  width: 92%;
  margin: 0px auto;
}


.menu{
    display: flex;
  align-items:center;
  justify-content:space-between;
  background-color: yellow; 
}
.menu-items{
  display: flex;
  align-items:center;
  flex-basis:40%;
}
.menu-select{
    display: flex;
  align-items:center;
  background-color: red;
    flex-basis:60%;
}

.menu-select select{
  border:1px solid gray;
}

.menu-items li{
  margin-right: 15px;
}

.menu-items a{
  padding: 10px;
}

.div-content{
  display:flex;
}

Answer 1

遗憾的是，您无法按照this answer中的说明将图标添加到选择选项。

如果您想为没有图标的选择男孩设置样式，可以使用以下css：

.menu-select{
  display: flex;
  align-items:center;
  background-color: red;
  flex-basis:60%;
  align-items: center;
  justify-content: center;
}

#item-select {
  margin: 10px;
  width: 150%;
}

这会将选择菜单和文本放在容器中，并使用width中的属性#item-select，您可以将选择的宽度设置为您喜欢的值。 Here is the full working example.

选择右侧的选项菜单，宽度更大

1 个答案: