Question

我正在尝试在CSS中创建循环按钮。我使用private void CreateDynamicControls(bool incrementRowCount = false) { int rowCount = 0; //initialize a session. rowCount = Convert.ToInt32(Session["clicks"]); if (incrementRowCount) rowCount++; Session["clicks"] = rowCount; //Create the textboxes and labels each time the button is clicked. for (int i = 0; i < rowCount; i++) { TextBox TxtBoxU = new TextBox(); //TextBox TxtBoxE = new TextBox(); Label lblU = new Label(); //Label lblE = new Label(); TxtBoxU.ID = "TextBoxU" + i.ToString(); //TxtBoxE.ID = "TextBoxE" + i.ToString(); lblU.ID = "LabelU" + i.ToString(); //lblE.ID = "LabelE" + i.ToString(); lblU.Text = "User " + (i + 1).ToString() + " : "; //lblE.Text = "E-Mail : "; //Add the labels and textboxes to the Panel. Panel1.Controls.Add(lblU); Panel1.Controls.Add(TxtBoxU); Panel1.Controls.Add(new LiteralControl("<br/>")); Panel1.Controls.Add(new LiteralControl("<br/>")); } } protected void Page_Init(object sender, EventArgs e) { //If PostBack caused by btnAddCtrl, it will take care of adding controls if (Page.Request.Params.AllKeys.Contains("btnAddCtrl")) return; CreateDynamicControls(); } protected void Page_Load(object sender, EventArgs e) { } protected void btnAddCtrl_Click(object sender, EventArgs e) { CreateDynamicControls(true); } protected void btnSave_Click(object sender, EventArgs e) { foreach (TextBox textBox in Panel1.Controls.OfType<TextBox>()) { } }使按钮看起来像一个圆圈，但只有在我明确设置元素的宽度和高度时它才有效。但是，如果我这样做，按钮将无法调整以修复较大的文本

这是我迄今为止所尝试过的：

＆＃13;

border-radius: 100%

＆＃13;

.round-button{
  width: 60px;
  height: 60px;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
  border-style: none;
  color: white;
  background-color: #3498db;
  border-radius: 100%;
  overflow: none;
  text-align: center;
}

.round-button:active{
  background-color: #2980b9;
}

＆＃13;

正如您所看到的，第一个按钮看起来很不错，但第二个按钮中的文字溢出了它。我已经使用<div> <button class="round-button">Button</button> </div> <div> <button class="round-button">This text will overflow the button!</button> </div>来防止它看起来很丑，但我希望按钮大小可以根据内容的大小进行调整。这可能吗？

Answer 1

为了画一个圆圈，你需要一个正方形来开始。

您可以使用带百分比值的垂直填充插入高度等于宽度的伪。

https://www.w3.org/TR/CSS2/box.html#padding-properties          百分比是根据生成的框的包含块的宽度计算的，即使对于“填充顶部”和“填充底部”也是如此。如果包含块的宽度取决于此元素，则在CSS 2.1中未定义结果布局。

与margin属性不同，填充值的值不能为负数。与margin属性一样，padding属性的百分比值指的是生成的box包含块的宽度。

制作这个伪内联块以帮助中心文本。

如果文本必须包含几行，则需要在内联块中进行包装..如果使用内联块伪。

您也可以设置最大和最小宽度。

示例：

.round-button{
  min-width: 60px;
  max-width:120px;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
  border-style: none;
  color: white;
  background-color: #3498db;
  border-radius: 100%;
  overflow: none;
  text-align: center;
  padding:0;
}
.round-button:before {
  content:'';
  display:inline-block;;
  vertical-align:middle;
  padding-top:100%;
}
span {
  display:inline-block;
  vertical-align:middle;
  max-width:90%;
}
.round-button:active{
  background-color: #2980b9;
}

<div>
  <button class="round-button"><span>Button</span></button>
</div>
<div>
  <button class="round-button"><span>This text should NOT overflow the button!</span></button>  
</div>

Answer 2

您正在寻找一种自动方式，使宽度和高度相等，同时增加其大小。如果是这样，我不会认为有一种方法可以在CSS中做到这一点。我的意思是你不期望width=height吗？

我不确定JQuery可能是解决方案，因为它有运算符并且可以与CSS交互。

编辑阅读完上一个答案后，我现在明白在填充方面有办法。但在我的回答中，我说“我不认为”。我很喜欢@GCyrillus BTW的解决方案。

全圆形按钮，动态尺寸

2 个答案: