Question

我试图制作一个<p>标签，该标签在图像中间的底部带有边框。但是我遇到了一些问题。首先，我添加了display: inline属性，因此边框仅显示在文本下方，但是之后我无法进行文本对齐，因此我的第一个想法是添加页边距并手动编辑边框，但是当我更改缩放级别或切换到移动视图时，问题边界再次出现。

这是我的代码，如果有人可以找到一种方法来与display:block;进行文本对齐或解决我的问题的任何其他解决方案。

p#p01 {
  text-align: center;
  display: block;
  border-bottom: solid black;
}

div#div03 {
  background-image: url("background.jpg");
  width: 1000px;
  height: 300px;
  background-repeat: no-repeat;
  background-size: 1000px 300px;
}

<div id="div03">
  <p id="p01">TESTE TETSTEE</p>
</div>

Answer 1

您可以将width: 1000px的{{1}}更改为width:100%

div#div03

p#p01 {
  text-align: center;
  display: block;
  border-bottom: solid black;
}

div#div03 {
  background-image: url("background.jpg");
  width: 100%;
  height: 300px;
  background-repeat: no-repeat;
  background-size: 1000px 300px;
}

Answer 2

您必须定义边框的粗细。否则，它将不会显示。


    import { shallowMount } from "@vue/test-utils";
    import plannerObjectSelector from "../../components/core/bars/planner/plannerObjectSelector";
    import { __createMocks as createStoreMocks } from "../../store";
    import _ from "lodash";

    import { createLocalVue } from "@vue/test-utils";

    import Vuex from "vuex";
    import Vuetify from "vuetify";

    var plannerObjects = [
    {
    id:0
    }
    ];
    const factory = () => {
      return shallowMount(plannerObjectSelector, {
        propsData: {
          plannerObjects: plannerObjects
        }
      });
    };

    describe("plannerObjectSelector.vue", () => {
      const localVue = createLocalVue();
      localVue.use(Vuex);
      localVue.use(Vuetify);

      // to use Store
      let NuxtStore;
      let store;

      beforeAll(async () => {
        // note the store will mutate across tests
        const storePath = `${process.env.buildDir}/store/index.js`;
        NuxtStore = await import(storePath);
      });

      beforeEach(async () => {
        store = await NuxtStore.createStore();
      });  

      it("renders", () => {
        const wrapper = factory();
        expect(wrapper.exists()).toBe(true);
      });

      it("buttonClickedStoresObjectInStore", () => {
        const wrapper = factory();
        var btnref = "unSelectedBtn-0";
        const btn = wrapper.find({ ref: btnref });
        btn.trigger("click");
        // look whats in our Store
        let plannerObject = store.getters["planner/activePlannerObject"];
        console.log(plannerObject);
        expect(plannerObject).toBe(plannerObjects[0]);
      });

      test("mounts properly", () => {
        const wrapper = factory();
        expect(wrapper.isVueInstance()).toBeTruthy();
      });

      test("renders properly", () => {
        const wrapper = factory();
        expect(wrapper.html()).toMatchSnapshot();
      });
    });

祝您编程愉快！

边框和行内标签有问题

2 个答案: