Question

虽然我正在摆弄这个'Fancy 3D Button'示例，但我发现width似乎是硬编码的，以适应文本的宽度。

这是HTML / CSS：

body {
  background-image: url(http://subtlepatterns.com/patterns/ricepaper.png)
}
a {
  position: relative;
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  background-color: rgba(219, 87, 5, 1);
  font-family: 'Yanone Kaffeesatz';
  font-weight: 700;
  font-size: 3em;
  display: block;
  padding: 4px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
  -moz-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
  box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
  margin: 100px auto;
  width: 160px;
  text-align: center;
  -webkit-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  -o-transition: all .1s ease;
  transition: all .1s ease;
}
a:active {
  -webkit-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
  -moz-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
  box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
  position: relative;
  top: 6px;
}

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>

<a href="javascript:void(0);">Push me!</a>

Normal look

如果我删除width属性，该按钮将填充页面宽度。

Without the width property

有没有办法让按钮的宽度自动适合文本？

Answer 1

删除宽度display: block，然后将display: inline-block添加到按钮。要使其保持居中，您可以在text-align: center;上添加body，也可以在新创建的容器上执行相同操作。

这种方法的优势（如同以自动边距为中心）是按钮将保持居中，无论它有多少文字。

示例：http://cssdeck.com/labs/2u4kf6dv

Answer 2

很晚，并且在询问问题时不确定这是否可用，请设置width: auto;

似乎要做的伎俩

Answer 3

我喜欢Roger Cruz的回答：

import React, { Component } from "react";
import { Table, Container, Button } from "reactstrap";
import { connect } from "react-redux";
import {
  getClients,
  addClient,
  deleteClient,
  setClientToEdit,
} from "../actions/clientActions";
import PropTypes from "prop-types";
import ClientEditModal from "./ClientEditModal";

class ClientTable extends Component {
  state = {
    isOpen: false,
  };

  componentDidMount() {
    this.props.getClients();
  }

  openEditModal = () => {
    if (this.state.isOpen === false) {
      this.setState({isOpen: true})
    } 
  };

  onDeleteClick = (id) => {
    this.props.deleteClient(id);
  };

  renderClient = (clients, _id) => {
    return (
      <tr key={_id} timeout={500} classNames="fade">
        <td>
          <Button
            className="remove-btn"
            color="danger"
            size="sm"
            onClick={() => this.onDeleteClick(clients._id)}
          >
            &times;
          </Button>

          <Button
            style={{ marginLeft: ".2rem" }}
            className="add-btn"
            outline
            color="warning"
            size="sm"
            onClick={this.openEditModal}
          >
            Edit
          </Button>

          <Button
            style={{ marginLeft: ".3rem" }}
            className="detail-btn"
            outline
            color="info"
            size="sm"
            onClick={this.toggleDetails}
          >
            Details
          </Button>
        </td>
        <td>{clients.name}</td>
        <td>{clients.email}</td>
        <td>{clients.number}</td>
      </tr>
    );
  };

  render() {
    const { clients } = this.props.client;
    return (
      <Container id="listContainer">
        {this.state.isOpen ? <ClientEditModal /> : null };
        <Table
          id="listTable"
          className="table-striped table-bordered table-hover"
          dark
        >
          <tr class="listRow">
            <thead id="tableHeader">
              <tr>
                <th id="listActions">Actions</th>
                <th id="listName">Name</th>
                <th id="listEmail">Email</th>
                <th id="listNumber">Number</th>
              </tr>
            </thead>
            <tbody class="listRow">{clients.map(this.renderClient)}</tbody>
          </tr>
        </Table>
      </Container>
    );
  }
}

ClientTable.propTypes = {
  getClients: PropTypes.func.isRequired,
  client: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  client: state.client,
});

export default connect(mapStateToProps, {
  getClients,
  deleteClient,
  addClient,
  setClientToEdit,
})(ClientTable);

我想补充一下，您可以使用

width: fit-content;

在按钮中文本的左右两侧添加一个漂亮的10px填充。否则，文本将沿着按钮的边缘向上对齐，并且看起来不太好。

Answer 4

还可以使用Meteor.user()和display: inline-flex

来保持元素相对于其内容的大小

可以通过..

完成居中

display: table（或以上，已继承）
text-align: center;和display: flex;
justify-content: center; position: absolute; left: 50%;开启有位置的元素：相对; （至少）在父母身上。

这里是来自CSS Tricks的flexbox guide

这里是CSS Tricks的article on centering。

保持元素的内容只与其内容一样宽。

可以使用transform: translateX(-50%);
或内联 - 我的代码段中使用的包括display: table;在内的任何内容以下示例。

请记住，当文本换行文本时，使用flexbox＆{39} inline-flex居中时，左对齐。因此，如果您的网站具有响应性并且您希望换行，那么您仍然需要justify-content: center;。

this stack answer

＆＃13;

text-align: center;

＆＃13;

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px;
}
.container {
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center; /* center vertically */
  height: 50%;
}
.container.c1 {
  text-align: center; /* needed if the text wraps */
  /* text-align is inherited, it can be put on the parent or the target element */
}
.container.c2 {
 /* without text-align: center; */
}
.button {
  padding: 5px 10px;
  font-size: 30px;
  text-decoration: none;
  color: hsla(0, 0%, 90%, 1);
  background: linear-gradient(hsla(21, 85%, 51%, 1), hsla(21, 85%, 61%, 1));
  border-radius: 10px;
  box-shadow: 2px 2px 15px -5px hsla(0, 0%, 0%, 1);
}
.button:hover {
  background: linear-gradient(hsl(207.5, 84.8%, 51%), hsla(207, 84%, 62%, 1));
  transition: all 0.2s linear;
}
.button.b1 {
    display: inline-flex; /* element only as wide as content */
}
.button.b2 {
    display: table; /* element only as wide as content */
}

＆＃13;

<强>小提琴

https://jsfiddle.net/Hastig/02fbs3pv/

Answer 5

如果您正在开发现代浏览器。 https://caniuse.com/#search=fit%20content

您可以使用：

width: fit-content;

Answer 6

尝试将display:inline;添加到按钮的CSS属性中。

Answer 7

只需添加 display：inline-block; 属性并删除宽度。

Answer 8

如果您希望最大程度地支持浏览器，现代的方法是将按钮放在display:flex;和flex-direction:row;的div中。相同的技巧适用于flex-direction:column;的height或高度和宽度（需要2格）

使按钮宽度适合文本

8 个答案: