Question

我遇到了这种问题，因为我已经尝试了以下代码：

.form {
  position: relative;
  width: 80%;
  background: #CCC;
}

.btn-one,
.btn-two {
  position: relative;
  height: 35px;
  width: 50%;
  border: 0;
  border-radius: 4px;
  color: white;
  background: Steelblue;
  display: inline-block;
}

<div class="form">
  <button class="btn-one">Button 1</button>
  <button class="btn-two">Button 2</button>
</div>

但是结果是 .btn-one 最终出现在新行上或 .btn-one 的底部。内联它们时，如何使整个宽度没有空格？我希望有人在不使用Bootstrap的情况下给出答案。仅在纯CSS中。

Answer 1

        //setName
        public void setName(String n) {
            this.name = n;
        }

        //getName
        public String getName() {
            return this.name;
        }

        //main method.
        public static void main(String[] args) {
            Scanner s = new Scanner(System.in);
            Test test = new Test();
            test.setName(s.next());
            test.displayInfo();
        }

Answer 2

将float: right;添加到.btn-two：

.btn-two {
  float: right;
}

请参见下面的工作示例：

.form {
  position: relative;
  width: 80%;
  background: #CCC;
}

.btn-one, .btn-two {
  position: relative;
  height: 35px;
  width: 50%;
  border: 0;
  border-radius: 4px;
  color: white;
  background: Steelblue;
  /* display: inline-block; <-- No need for display */
}

.btn-two {
  float: right;
}

<div class="form">
  <button class="btn-one">Button 1</button>
  <button class="btn-two">Button 2</button>
</div>

Answer 3

您可以使用public void displayInfo() { Scanner userinput = new Scanner(System.in); System.out.println("Enter a name: "); setName(userinput.nextLine()); System.out.println("You entered " + this.getName()); }

HTML：

display: flex;

CSS：

<div class="form">
    <button class="btn-one">Button 1</button>
    <button class="btn-two">Button 2</button>
</div>

尝试一下

.form {
    position: relative;
    width: 80%;
    background: #CCC;
    display: flex;
}
.btn-one, .btn-two {
    position: relative;
    height: 35px; width: 50%;
    border: 0; border-radius: 4px;
    color: white;
    background: Steelblue;
}

.form {
    position: relative;
    width: 80%;
    background: #CCC;
    display: flex;
}
.btn-one, .btn-two {
    position: relative;
    height: 35px; width: 50%;
    border: 0; border-radius: 4px;
    color: white;
    background: Steelblue;
    display: inline-block;
}

如何使内联按钮全宽？

3 个答案: