Question

我知道，这个不是很具体，但很难解释，所以我会提供图片。以下是我的网页现在的样子： How it currently looks

如何使用CSS使其看起来像这样？ How I want it to look

抱歉，如果图像非常糟糕，我就是在油漆上制作的。

这是我的html：

    <!DOCTYPE html>
    <html>
    <head>
        <title>Dice Roll Game!</title>
    <!-- Bootstrap CDNs -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <!-- End of Bootstrap CDNs -->
    </head>
    <body>
    <h2> We're gonna roll a dice! <br><small>And you have to guess which number the dice will roll.</small></h2>
    <div>
 Select your guess:
 <select class="form-control" id="select">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
 </select>
</div>
    <button id="submit" type="button" class="btn btn-primary">Roll!</button>
    </body>
    </html>

Answer 1

HTML：

<h2> We're gonna roll a dice! <br><small>And you have to guess which number the dice will roll.</small></h2>
<div id="test-container">
    <p>Select your guess: </p>
    <select class="form-control" id="select">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
    </select>
</div>
<button id="submit" type="button" class="btn btn-primary">Roll!</button>

CSS：

#test-container {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
#test-container p {
    margin-bottom: 0;
    margin-right: 15px;
}
#test-container select {
    width: auto;
}

http://jsfiddle.net/et81qkzr/1/

Answer 2

删除文本“选择您的猜测：”周围的p标记，并在文本和div标记周围添加select标记。

<div>
 Select your guess:
 <select class="form-control" id="select">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
 </select>
</div>

评论后编辑：如果它仍然是相同的，也许bootstrap正在违背你的意愿行事。尝试匹配Bootstrap准则：

 <form class="form-horizontal">
 <div class="form-group">
    <label for="select" class="col-sm-2 control-label">Select your guess:</label>
    <div class="col-sm-10">
      <select class="form-control" id="select">
       <option>1</option>
       <option>2</option>
       <option>3</option>
       <option>4</option>
       <option>5</option>
       <option>6</option>
     </select>
    </div>
  </div>
  <div class="form-group">
   <div class="col-sm-offset-2 col-sm-10">
    <button id="submit" type="button" class="btn btn-primary">Roll!</button>
   </div>
  </div> 
</form>

如何让我的网页看起来像这样？

2 个答案: