Question

我想制作一个类似于您想要加入服务器时单击的Club Penguin按钮的按钮。

在此图片中，您会看到该按钮有三个主要部分，即表情符号，名称和玩家数量。

如何使用多个部件制作与此类似的按钮？或者div会更好吗？无论哪种方式，我希望用户能够点击它。

这是我尝试的但我遇到了困难。

<div id="container">
  <button id="button">
    <div id="first">
      Emoji
    </div>
    <div id="second">
      Name
    </div>
    <div id="third">
      Player count
    </div>
  </button>
</div>

CSS：

#button {
  width:400px;
}
#first {
  float:left;
}
#second {
  float:center;
}
#third {
  float:right;
}

https://jsfiddle.net/rmozk80x/

Answer 1

如果你需要类似的东西，你可能会觉得这很有用。

内联块显示可以让您更好地控制流量。此外，您可以将其设为div并使用cursor: pointer;将鼠标悬停在它看起来就像是一个按钮。

＆＃13;

      #button {
        width:400px;
        height: 50px;
        border: 3px solid lightblue;
        border-radius: 25px;
        background: darkblue;
        cursor: pointer;
        color: white;
        font-wieght: 105%;
        font-family: Consolas;
      }

      #first {
        float:left;
        margin-left: 5px;
        margin-top: 3px;
        display: inline-block;
      }

      #second {
        display: inline-block;
        margin-left: 10px;
        margin-top: 15px;
      }
      #third {
        display: inline-block;
        float:right;
        margin-top: 15px;
        margin-right: 30px;
      }

＆＃13;

<div id="container">
  <div id="button" onclick="alert('you clicked me!')">
    <div id="first">
      <img src="http://cdn.hercampus.com/s3fs-public/styles/full_width_embed/public/2015/04/12/persons-0004_large.png" alt="Smiley face" height="42" width="42">
    </div> 
    <div id="second">
      Name
    </div>
    <div id="third">
      Player count
    </div>
  </div>
</div>

＆＃13;

Answer 2

试试这个：

#button {
width:400px;
}

#first {
float:left;
width: 33%;
text-align: left;
background-color:
}

#second {
float:left;
text-align: center;
}
#third {
float:right;
}

不要居中第二，但要将其对齐并根据需要对齐内容。您也可以调整第一个div的宽度。

Answer 3

我不建议使用html元素。相反，您可以将JavaScript事件侦听器添加到包含可点击内容的div中。该内容可以根据您的选择进行设计。以下是我解释你的场景的方法。

＆＃13;

case object Nil extends List[Nothing] {
  override def isEmpty = true
  override def head: Nothing =
    throw new NoSuchElementException("head of empty list")
  override def tail: List[Nothing] =
    throw new UnsupportedOperationException("tail of empty list")
  override def equals(that: Any) = that match {
    case that1: scala.collection.GenSeq[_] => that1.isEmpty
    case _ => false
  }
}

＆＃13;

var emojiAction = document.getElementById('first');

emojiAction.addEventListener('click', function() {
    alert('Hello world');
}, false);

var nameAction = document.getElementById('second');

nameAction.addEventListener('click', function() {
    alert('Hello name');
}, false);

var playerCountAction = document.getElementById('third');

playerCountAction.addEventListener('click', function() {
    alert('x Players Online!');
}, false);

＆＃13;

#buttonContainer {
  width:100%;
  height:20px;
  background-color:#999;
  text-align:center;
  bottom:0;
  position: fixed;
  margin: 0 auto;
  padding:15px;
}

#first {
  width: calc(33% - 10px);
  height: 20px;
  float: left;
  margin-left: 10px; 
}

#second {
  width: calc(33% - 10px);
  height: 20px;
  float: left;
  margin-left: 10px; }

#third {
  width: calc(33% - 10px);
  height: 20px;
  float: left;
  margin-left: 10px; 
}

＆＃13;

如何制作具有不同部件的按钮？

3 个答案: